Crear un favicon para nuestra página web

Tal vez algunos de ustedes se habrán fijado en el pequeño icono que aparece al lado izquierdo de la barra de dirección del navegador cuando se accede a ciertas páginas, incluída esta. Ese pequeño gráfico se denomina favicon, un apócope para las palabras “FAVorite ICON” o icono favorito, que permite identificar más rápidamente a la página en cuestión dentro de una lista de favoritos. Hoy explicaré cómo crear uno para nuestra propia página web.

Normalmente este icono corresponde al logo o imagen identificativa de nuestra web o a algún signo asociado a la misma, como pasa con la marca Adobe por ejemplo.

Hay varias maneras de hacerlo, dependiendo de si ya tenemos un logo creado o partimos desde cero. Si es el primer caso, podremos convertir esa imagen al formato propio del favicon, es decir, un tamaño de 16 x 16 pixeles, usando herramientas web como esta. Lo único que tenemos que hacer es proporcionar un archivo con los formatos soportados (gif, jpg, png o bmp), y la aplicación generará un icono que podremos descargar para usarlo posteriormente. También podemos usar archivos png transparentes si lo necesitamos.

favicongen

Si por el contrario, queremos diseñar desde el principio, tenemos dos alternativas: esta página nos permite generar el icono dibujando directamente sobre una cuadrícula de 16 x 16 pixeles ampliada, y ver el resultado en tiempo real. Podemos escoger los colores, el fondo y rehacer nuestro trabajo si algo no nos gusta. Cuando terminemos, podemos bajar el icono o publicarlo bajo una licencia abierta.

faviconcc

Por último, podemos usar una herramienta como Photoshop para dar rienda suelta a nuestra imaginación, tal como se explica en este tutorial de Jennifer Apple.

Una vez tengamos el icono (llamado siempre favicon.ico), independiente del método que hayamos usado para crearlo, bastará, en la mayoría de los casos, con subirlo al directorio raíz del servidor donde tengamos almacenado nuestro sitio web y al refrescar el navegador que usemos, veremos como aparece junto a la barra de navegación. A veces tendremos que forzar un refresco de la página o vaciar la caché del navegador para verlo. En Internet Explorer puede que sea necesario añadir la página a los favoritos para que el icono sea mostrado.