Puede decirse que un sitio web tiene normalmente asociado un icono o símbolo llamado Favicon. Se trata de ese pequeño emblema que sueles ver en la barra de títulos de tu navegador favorito, justo delante del título de la página que estás visitando.
En el caso de Webgenio.com el icono es una W y una G dentro de un cuadro naranja/marrón, como puedes imaginar, se trata de las iniciales de web y genio. Utilizar una o dos letras representativas de la web en cuestión es una técnica que suele utilizarse bastante, sobre todo teniendo en cuenta que el espacio del que dispones es realmente pequeño, tan solo 16×16 pixels.
A la hora de crear un Favicon para tu propia web o blog no hace falta que hagas el diseño a ese tamaño, puedes trabajar con una imagen más grande y luego reducirla, pero llegado a ese pungo verás que la cosa no es tan fácil, ya que el formato de imagen de un Favicon se encuentra en algunos paquetes de software de diseño gráfico y en otros no … e incluso con software especial a veces te encuentras con problemas.
Aquí veremos una forma rápida y efectiva de crear tu Favicon de forma fácil y rápida en cuestión de segundos utilizando una herramienta online.
Lo primero que tienes que hacer es crear una imagen grande que contenga tu diseño del Favicon y guardarla en formato .png o .gif con un tamaño máximo de 150kb. Estos formatos (png y gif) tienen la ventaja de que puedes utilizar transparencias para conseguir efectos divertidos cuando el Favicon se muestre en el navegador, esto dependerá de tu creatividad.
Otra cuestión es que podrías llegar a diseñar un Favicon animado, pero no te lo recomiendo porque puede llegar a ser demasiado molesto para muchas personas, así que busca un diseño claro, sencillo y que identifique a tu web o blog.
Una vez que tienes tu imagen png/gif lo único que tienes que hacer es visitar esta página en dynamicdrive y hacer click sobre el botón ‘Seleccionar Archivo’ para subir tu archivo gráfico. Luego verás justo abajo un botón que dice ‘create icon’, haz click en este botón para generar tu Favicon. Verás que es un archivo con nombre favicon.ico … esto es así siempre y en cualquier caso, no debes renombrarlo porque si no no funcionará.
¿Cómo inserto un Favicon en mi web o blog?
Una vez que tienes listo tu Favicon solo tienes que hacer dos cosas, una de ellas es subir al servidor donde tienes alojado tu web o blog la imagen favicon.ico que acabas de generar.
Una vez hecho esto, debes añadir en la cabecera de tus páginas este código:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Ten en cuenta que el código anterior debe ir en la cabecera, es decir, entre los códigos <head> y </head>
Por último ten en cuenta que es posible que el nuevo favicon de tu web no aparezca de forma automática, intenta eliminar la caché de tu navegador e incluso así es posible que tarde un tiempo en aparecer.