Siguiendo en la línea del artículo anterior (Optimización de imágenes para web) vamos a ver la importancia de tener un favicon y que sea lo más pequeño posible.

La importancia de tener un favicon.ico

Cada vez que el navegador solicita una página de tu servidor hace una petición para descargar el /favicon.ico (a no ser que se cachee, como veremos en próximos artículos). Hay otros casos en los que también se solicita el favicon, como cuando se guarda en favoritos.

El problema está en que tanto si tenemos favicon como si no, estas peticiones se realizan. Si tienes el favicon el servidor web lo devolverá sin problemas, y en caso contrario devolverá un error 404 (no aparecerá el favicon en la barra de direcciones). Si consigues hacer tu favicon pequeño y cacheable es mucho más eficiente tener el favicon que estar generando errores.

Además está el tema de la usabilidad (con navegadores con pestañas puede ser muy útil para el usuario) y “buena imagen”.

Comprimir el favicon.ico al máximo

Los archivos *.ico están diseñados para poder almacenar iconos de distintos tamaños en un mismo fichero, permitiendo mostrar el icono más adecuado en cada momento. En la web, a día de hoy, y a no ser que alguien me diga lo contrario, el único tamaño útil de un favicon es de 16×16 píxels, como se muestran en las barras de direcciones de los navegadores.

Empezaremos desde cero (si ya tienes un favicon.ico puedes pasar el siguiente párrafo). Suponemos que tenemos una imagen PNG o JPG cuadrada de por ejemplo 200×200 píxels, y queremos convertirla en un favicon lo más comprimido posible. Para ello utilizamos uno de los comandos de ImageMagick:

convert imagen.png -resize 16x16 favicon.ico

Una vez que tenemos el favicon creado, vamos a comprimirlo, basándonos en el hecho de que un favicon es tan pequeño que va a necesitar una paleta de colores muy pequeña, probando hasta encontrar un buen equilibrio entre tamaño y calidad. Utilizamos por ejemplo el  favicon de marca.com que ocupa 1.2K. Si intentamos reducir la paleta a 4 colores:

convert -colors 4 favicon.ico favicon_4c.ico

Obtenemos un favicon de 630 bytes, con una calidad muy parecida a la original, por lo que 4 sería el número de colores elegido, consiguiendo una reducción de casi 600 bytes, aunque con otro tipo de iconos la reducción puede ser de varios K.

Si hacemos la prueba de reducir a 8 el número de colores de algunos sitios web importantes obtenemos los siguientes resultados:

Vemos que en todos podemos obtener un favicon de 318 bytes, que es el tamaño recomendado, como el favicon de onizar .