Todo sobre los favicons

por Natalia Ventre el 30/01/2013 ・ podés leerlo en 2 minutos ・

Un favorite icon (favicon o shortcut icon) era un icono de 16x16px que Internet Explorer 5 mostraba al lado de la URL en la barra de direcciones y en la lista de favoritos. Actualmente un favicon puede aparecer en distintos contextos y tamaños, por ej.:

  • 16px o más según el sistema operativo y la resolución de la pantalla en la barra de direcciones, pestañas o marcadores
  • 57px iPhone (no Retina)
  • 72px pantalla de inicio de iPad (no Retina)
  • 114px pantalla de inicio de iPhone 4+
  • 144px pantalla de inicio de Windows 8, iPad Retina
  • 114x114px a 256x160px speed dial de Opera

Para dibujar un favicon o cualquier otro icono, se necesita una herramienta para dibujo vectorial con pre-visualización de pixeles, para asegurarse de que los bordes están alineados con la grilla y no se produzca desenfoque y además hay que tener en cuenta los siguientes puntos:

  • iOS: le aplica un brillo y esquinas redondeadas, excepto que se agregue el sufijo precomposed al nombre del archivo.
  • Windows 8: la imagen debe ser preferentemente transparente y se puede indicar un color de fondo.

Los favicons pueden tener formato:

  • ICO: soportado ampliamente y detectado automáticamente, en un mismo archivo puede contener diversos tamaños.
  • PNG: Chrome, Firefox, Opera 7+ y Safari 4+ aceptan el favicon PNG.
Captura de pantalla de X-Icon Editor
X-Icon Editor es una aplicación HTML5 basada en canvas que permite crear iconos en 4 resoluciones diferentes a través de su editor online o importando una imagen.

Jonathan T Neal en Undestand the Favicon explica cómo se comportan los distintos navegadores y plantea enlazar los favicons con el siguiente código para que Chrome y Safari usen el favicon.png en vez del favicon.ico:

<link rel="apple-touch-icon" href="ruta/al/touchicon.png">
<link rel="icon" href="ruta/al/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="ruta/al/favicon.ico"><![endif]-->

<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="ruta/al/tileicon.png">

Conclusión

Los favicons parecen un detalle menor y muchas veces se dejan para el final del proyecto, pero son un desafío a nivel de diseño es difícil crear un icono que represente al sitio web y que funcione bien en distintos tamaños y a nivel técnico hay que estar al tanto de cómo las nuevas versiones de los navegadores, sistemas operativos y dispositivos los muestran.