Favicon e iconos de aplicación

¿Qué son los favicon?

Los favicon son esos pequeños iconos que aparecen en las pestañas de nuestro navegador, favoritos o marcadores y que, dándole personalidad a la web, ayudan a potenciar su branding. Más recientemente, estos iconos también sirven para representar accesos directos en escritorios de ordenadores y de dispositivos móviles.

Originalmente, el favicon era una imagen en formato ICO, desarrollado por Microsoft, cuyas especificaciones datan de la primera versión de Windows pero cuyas características han ido evolucionando con los tiempos, que fue adoptada por el Internet Explorer de Microsoft para serlo, más tarde, por el resto de navegadores.

El formato ICO tenía sus peculiaridades y, dado que no estaba en los formatos de exportación de herramientas de diseño tales como Photoshop o The GIMP sin plugins específicos, se llegaron a desarrollar programas especializados en su creación.

Los navegadores más recientes ya reconocen los favicon en otros formatos distintos al ICO, como el GIF y el PNG, lo que facilita bastante la tarea. Con la aparición de la versión 4.3 de WordPress, tan solo tenemos que elegir una imagen de nuestra galería de Medios y asignarla como Icono del sitio para tener tanto el favicon como los iconos para aplicaciones móviles.

Desde el punto de vista del diseño, ningún sitio web y mucho menos una webapp para móvil estarán completos sin sus correspondientes iconos, ya que contribuyen de forma importante al branding.

Iconos de aplicación

Además del favicon que se muestra en el navegador, nuestras webs pueden tener iconos para accesos directos tanto en ordenadores como en dispositivos móviles.

En el caso de los ordenadores, la manera de crearlos es suficientemente conocida, por lo que no lo trataré aquí, limitándome a los dispositivos móviles.

Android

En los dispositivos Android dicha capacidad está relacionada con la disponibilidad del navegador Chrome o de Firefox. Ambos tienen una opción de menú para «Añadir a la pantalla de inicio».

iOS

En los dispositivos que ejecutan iOS, es el navegador Safari el que se encarga de la tarea a través del icono Compartir, en el que aparece una opción para crear un icono en la pantalla de inicio.

El tamaño (del icono) sí importa

Cada sistema operativo y, dentro de ellos, cada aplicación de los iconos tiene sus especificaciones de tamaño. A continuación se muestra una tabla con los más populares:

Esta tabla está modificada del artículo Choosing the Right Size and Format for Icons.

Utilidades para generar iconos

Al margen de los programas habituales de diseño, os propongo una serie de utilidades gratuitas para crear iconos en línea.

Real Favicon Generator

Una herramienta muy interesante porque, además de generarnos iconos de excelente calidad, nos permite comprobar si los iconos que tiene una web se adaptan a todos los dispositivos.

Favicon & App Icon Generator

Aunque con un interface un tanto espartano, cumple perfectamente las expectativas. Dispone, además, de una galería de favicon, organizados por colores, que pueden servir de inspiración para nuestros trabajos y de un sencillo editor de iconos.

Genfavicon

Un generador de iconos «made in Spain». Con pocas opciones pero que puede sacar de apuros a quien no hable inglés.

[button color=»green» size=»small» type=»d3″ icon=»eye» target=»_blank» url=»http://www.genfavicon.com/»]Visitar[/button]

favicon.cc

favicon.cc realmente es un editor de iconos que nos permite crear favicon animados de 16 x 16 pixels. Para los más artistas, permite distribuir los favicon creados con licencia Creative Commons.

X-Icon Editor

Más completo que favicon.cc, nos permite crear iconos hasta de 64 x 64 pixels.