Como hacer una faviconera

El uso de una caja de favicones como se muestra en la imagen es una de las técnicas utilizadas para intercambio de enlaces por medio de favicon.

Se trata de un bloque o caja destinado a almacenar los favicones de otros sitios web con los que desee intercambiar, desde luego cada favicon guarda el enlace a la página principal correspondiente, por ejemplo puede explorar mi faviconera que esta situada a su derecha.

¿Que es un Favicon?

Un favicon es una pequeña imagen de tamaño 16X16 px. que hace parte de la identidad gráfica de un sitio web.  El nombre favicon proviene de la composición Favorites Icon (Iconos favoritos)  y son utilizados por los navegadores web en las pestañas y en los marcadores (favoritos).

Es importante hacer una acotación antes de proseguir.  Como ya se acaba de definir acerca del favicon, pero si no estas familiarizado con el uso de este y probablemente poseas un blog de blogger (como este), entonces verás que en la pestaña del navegador el favicon será el de Blogger :

Este resultado (el ver el favicon en la pestaña) se logra con un procedimiento que requiere intervención en el código fuente del blog, algo que no es parte de esta entrada, pero que posteriormente veremos como se hace.

Una característica acerca del uso del favicon en su aplicación original (como se ve en la anterior imagen) es que este sea creado con la extensión .ICO, aunque para las últimas actualizaciones de navegadores ya se acepta el favicon con la extensión .PNG y .GIF.   De todas formas para el uso de favicon en faviconeras no es camisa de fuerza y preferiblemente se aconseja el uso del .PNG, 

¿Como hacer una faviconera para intercambio de favicones?

Una forma sencilla de crear una faviconera para tu blog es la siguiente (en Blogger). Selecciona y copia el siguiente código, luego pegarlo en un gadget HTML/Javascript. He dejado los datos de mi favicon en azul para que les sirva de guía.

Este fragmento de código se repite seguidamente cada vez que requieras agregar otro favicon a la faviconera, yo por ejemplo tengo dos imágenes de favicon, una en color, que es la original y otro en gris que se repite continuamente y a los que he dejado como enlace la entrada donde ofrezco el intercambio de favicon.

y

<a href="http://www.tecnotierra.blogspot.com/" target="_blank"><img src="http://www.dinamicolor.com/TT/tecnotierra.png" title="Tecno Tierra" style="padding:2px; border:1px solid gray" /></a>

Recuerda bien los datos básicos para un favicon que son siguiendo el orden de las partes en azul  del anterior código:

1.  La URL del web:  http://www.tecnotierra.blogspot.com/

2.  La URL del favicon: http://www.dinamicolor.com/TT/tecnotierra.png

3.  El título del blog (al evento de pasar el mouse sobre el favicon): Tecno Tierra