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.

El favicon de esta web

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:

Favicon

16×16, 32×32, 48×48

Windows

16×16, 24×24, 32×32, 48×48, 256×256

Mac OS X

16×16, 32×32, 64×64, 128×128, 256×256, 512×512, 1024×1024

Linux

16×16, 24×24, 48×48, and 96×96

iOS 6

29×29, 50×50, 57×57, 58×58, 72×72, 100×100, 114×114, 144×144, 1024×1024

iOS 8

29×29, 40×40, 58×58, 60×60, 76×76, 80×80, 120×120, 152×152, 180×180, 1024×1024

Android L

24×24, 48×48, 192×192, 512×512

Windows Phone

62×62, 99×99, 173×173, 200×200

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

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.

[button color=”green” size=”small” type=”d3″ icon=”eye” target=”_blank” url=”http://realfavicongenerator.net”]Visitar[/button]

Favicon & App Icon Generator

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.

[button color=”green” size=”small” type=”d3″ icon=”eye” target=”_blank” url=”http://www.favicon-generator.org/”]Visitar[/button]

Genfavicon

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

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.

[button color=”green” size=”small” type=”d3″ icon=”eye” target=”_blank” url=”http://www.favicon.cc/”]Visitar[/button]

X-Icon Editor

X_Icon_Editor

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

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

Por favor, valora esta entrada:
Si te gusta, compártelo:

Deja un comentario

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más información

Las opciones de cookie en este sitio web están configuradas para "permitir cookies" para ofrecerte una mejor experiéncia de navegación. Si sigues utilizando este sitio web sin cambiar tus opciones o haces clic en "Aceptar" estarás consintiendo las cookies de este sitio.

Cerrar