Cómo crear un favicon perfecto para tu marca

Descubre cómo crear y utilizar el favicon de tu marca

Generar un favicon con plantilla de Illustrator

Los favicon son una parte integral de una marca y aseguran que un sitio web, sea inmediatamente reconocible en los navegadores y aplicaciones de cualquier dispositivo.

Los consumidores tienen un concepto sobre los productos o servicios de una empresa que identifican y diferencian, de otros iguales o parecidos, gracias a la identidad de marca, representada visualmente por un logotipo.
Dicho esto, un logotipo es algo más que un punto de referencia visual en la esquina superior izquierda de un sitio web.

Los favicon son logotipos miniaturizados que establecen la identidad de una marca fuera de su sitio web y permiten mantener una presencia visual constante en lugares como:

• Pestañas de navegadores
• Barras de direcciones URL
• Marcadores del navegador
• Historiales de búsqueda en Internet
• RSS Feeds
• Pantallas de inicio móviles y de escritorio
• Iconos de aplicaciones

A diferencia de las imágenes destacadas que Google, las redes sociales o los agregadores de RSS pueden seleccionar y usar en las publicaciones, no se puede seleccionar un favicon. Si no diseña y carga un favicon, aparecerá un marcador de posición genérico. 

¿Qué es un favicon?

Favicon es la abreviatura del inglés "Favorite Icon" (icono favorito). El favicon fue introducido
en Internet Explorer a finales de la década de 1990. Su propósito es ayudar a los usuarios a encontrar y distinguir rápidamente los distintos sitios web abiertos en las pestañas del navegador.

¿Por qué es importante tener un favicon en un sitio web?

Reforzar la identidad de marca

Los sitios web que no tienen favicon mostrarán un icono genérico en las pestañas del navegador, historiales de búsqueda, feeds RSS y demás: (Firefox, Google, Microsoft Edge)

Es un icono de globo genérico. Y los usuarios de Internet puede que no conozcan el término "favicon", pero entenderán que falta algo si ven esto. 
Puede que no parezca gran cosa pero los usuarios notarán este nivel de atención al detalle.

Ahora, si miras en la pestaña de tu navegador arriba, verás un ejemplo del favicon de este blog que es el icono del logotipo. Los favicon son una pieza valiosa para un sitio web y su marca.

Los sitios web que no tienen favicon se considerarán poco profesionales.

Mejorar la navegabilidad por Internet 

El ejemplo anterior muestra la diferencia en el aspecto de una pestaña con o sin favicon. Pero no se trata solo de marcar una pestaña. Así es como los usuarios de Internet pueden navegar rápidamente de regreso a un sitio web, gracias a la referencia visual de un favicon. 
Cada pestaña abierta (Facebook, Gmail, Blogger, etc) tiene su favicon fácilmente reconocible.

El favicon evita que los usuarios tengan que leer los metatítulos en las pestañas del navegador. Como otros iconos y logotipos que usamos en los sitios web, el favicon le dice visualmente a los usuarios qué sitio web es cada ventana abierta del navegador. Muy útil, sencillo y efectivo.

Incrementar el reconocimiento de la marca

Crear un favicon fortalecerá el reconocimiento de marca de la audiencia. 

Por ejemplo, el favicon de Google es una "G" con los colores de su marca.

El favicon tiene un fondo de relleno sólido (a diferencia de uno transparente), por lo que la "G" de colores con fondo blanco es estético y además rápido y fácil de reconocer.

Las personas familiarizadas con la marca Google, reconocerán al instante este favicon en cualquier lugar donde lo encuentren. 
Por ejemplo, aparece en las lista de lector de Feeds, en los marcadores de favoritos del navegador, en el historial de Internet y no sólo en el navegador de escritorio, el favicon se muestra en las listas de marcadores de los Smartphone. 

Además, desde mayo de 2019, Google muestra un favicon en la página de resultados de búsqueda móvil (SERP). Al implementar un Favicon en su sitio web, sus resultados de búsqueda móvil serán más visibles, lo que puede resultar en una tasa de clics más alta.

Consejos para crear el favicon perfecto para tu marca

Se puede creer que con una versión redimensionada del logotipo ya es suficiente, esto no resultaría bien para un favicon, hay unos detalles a tener en cuenta.

1. Elegir un elemento destacable y reconocible de la marca.

Para algunas marcas, se podría utilizar el diseño del logotipo tal cual. 

ej. Apple con su manzana: 

Para las marcas que incluyen un texto con el nombre comercial y/o un eslogan, tienen que simplificarlo y diseñar algo especifico para el favicon. 

Gmail, por ejemplo, usa el icono M: 

2. Mantener una marca coherente pero simplificada

Obviamente, quieres que tu favicon sea reconocido y relacionado con tu marca. Debes usar tipografía, iconos y colores coherentes con tu identidad de marca.

Dicho esto, no querrás exagerar. Tu favicon cabe en un espacio muy pequeño, por lo que hay que tener cuidado con recargar el diseño.

Mira los favicon de otras marcas que te gustan y toma inspiración de ellas.

3. Decidir usar fondo transparente o relleno de color

Los favicons transparentes suelen ser para diseños basados ​​en iconos como el de Asana:

Uno de los beneficios de esto es que el icono se destaca claramente sobre el color de su fondo. 

El ejemplo anterior está en Chrome. Este ejemplo es de Safari:

Si se hubiera olvidado de guardar su favicon con un fondo transparente, habría un cuadro blanco antiestético a su alrededor en esta pestaña del navegador. 

Los favicons de relleno sólido son los mejores para los favicons basados ​​en letras como los de Stripe:

4. Diseña el favicon en varios tamaños estándar

Los favicon aparecen en distintos tamaños según la plataforma. Pueden ser tan pequeños como 16×16 píxeles, como 64×64 píxeles y más... En WordPress el editor recomienda un tamaño de 512×512px. 

El tamaño medio de los favicon de aplicaciones o accesos directos es de 152×152 px, pero puede llegar a 192×192 píxeles si desea ajustarlos exactamente para tabletas Android. 

Esta es, además, otra razón por la que un diseño más simple es mejor. Nunca se sabe cuánto necesitará aumentar o reducir su favicon.

5. Guardar el icono en varios formatos

Aunque los navegadores más populares han comenzado a aceptar favicon en otros formatos además de ICO, no todos tienen soporte universal. 

ICO y PNG disfrutan de soporte universal en las últimas versiones de cada navegador. Si bien GIF también lo hace, en realidad no es la opción ideal para un favicon. 

Criterios de diseño nos dice que hay que diseñar primero para el usuario y su experiencia libre de distracciones. Un favicon de navegador animado no es recomendable.

Si bien es posible que esté pensando en usar PNG, ya que es un formato más común, ICO es su mejor opción. Eso es porque puede guardar una o más imágenes, en diferentes tamaños y diferentes resoluciones, dentro de un solo archivo que es la forma más fácil de generar todas las instancias de favicon a la vez.

Para esto lo mejor es un archivo de plantilla para editar, aquí dejo un enlace a una plantilla para generar el icono en distintos tamaños cómodamente. Editando el diseño de la mesa principal se modifica el diseño en las demás mesas de trabajo preparadas para exportar el archivo automáticamente en varios tamaños.

Descargar plantilla generador de favicon para Illustrator