El icono que acompaña a nuestro sitio web suele ser una pequeña pieza a lo que se le presta gran valor. En parte, porque se minimiza su importancia y en parte por el gran desconocimiento que existe entre los diseñadores web sobre cómo crear buenos iconos que logren transmitir la identidad de la página.
Comencemos por el principio. El icono que acompaña a las páginas web fue introducido por Internet Explorer 5. Para ello bastaba con copiar en la raíz del sitio web un archivo «favicon.ico» que consistía una imagen de 16×16 píxeles. Hoy en día todos los navegadores modernos utilizan los iconos. Es más, algunos navegadores como Firefox suelen dejan un soso recuadro blanco si no hay imagen asociada para mostrar.
Jon Hicks acaba de editar The Icon Handbook, un libro que contiene un capítulo entero dedicado a los faviconos o iconos para páginas webs. En .netMagazine publican un extracto del capítulo con algunos interesantes consejos. Veamos:
- El icono no es un logotipo. Cumple una función similar a la bandera, una firma o una señal de tráfico: sirve para identificar de manera rápida y fácilmente reconocible.
- Hay que tener en cuenta el contexto donde el icono se va a reproducir. La imagen de 16×16 ya no es el único tamaño, los smartphone y tablets y nuevos navegadores utilizan sus propias resoluciones que llegan hasta las 195 pixeles en el caso de las ventanas iniciales de Opera.
- Las imágenes de mayor tamaño pierden nitidez al redimensionarse a otro tamaño y crean pixeles intermedios que dificultan la interpretación del gráfico. Por eso, lo mejor es incluir varias versiones del mismo icono
- El formato ICO y el PNG son los más adecuados. Ambos soportan transparencias y pueden ser reproducidos sin problemas por la mayor parte de dispositivos y navegadores.
- Una vez que tenemos la imagen de base en formato vectorial, el diseño tiene que partir del tamaño más pequeño y es fundamental borrar los píxeles intermedios que crean automáticamente los editores de imágenes.
- El formato ICO permite agregar múltiples resoluciones a un mismo archivo.
- Hay que considerar el formato tamaño para los dispositivos táctiles de Apple que trabajan en resoluciones diferentes (72×72). Los dispositivos con Android también lo soportan.
De la multitud de formatos de imagen en la que Photoshop puede guardar los trabajos hay uno importante que está ausente: ICO, que es formato en el cual se guardan los íconos, tanto para ser usados en aplicaciones como para colocar en un sitio web.