¿Alguna vez has prestado atención a esos pequeños iconos en la parte superior de las pestañas del navegador? Y qué tal cuando guardas un acceso directo a un sitio o página online? Esas pequeñas imágenes, o favicons, están diseñadas especialmente para ese propósito.

Hay una diferencia bastante clara entre lo que es un icono pequeño bueno o malo. Se te perdonaría por pensar que las decisiones de diseño a escala diminuta importan menos. Pero un favicon mal diseñado puede reflejar mal en su marca.

Hoy estamos viendo lo que estos iconos son, las técnicas básicas de diseño para ellos, y las especificaciones que tendrá que seguir.

¿Qué es un Favicon?

Simplemente, un favicon es un icono pequeño y transparente que se utiliza para representar un sitio web, marca o negocio. Los favicones ayudan a mejorar la experiencia del usuario al proporcionar un marcador consistente que indica a los visitantes del sitio web que están en el mismo sitio mientras navegan gracias a un visual consistente.

El término favicon viene de «icono favorito». Esta terminología se remonta a los tiempos de Internet Explorer, cuando las páginas marcadas se llamaban «Favoritos». El favicon fue adoptado por primera vez por el Consorcio de la World Wide Web (W3C) para HTML 4.0, alrededor del año 2000, y comenzó a aparecer de forma más consistente en las ventanas del navegador al año siguiente.

Usa los favicons para pasar rápidamente de una pestaña del navegador a otra, identificar un marcador o encontrar una aplicación guardada o un acceso directo en tu teléfono. El identificador visual es lo que la mayoría de la gente utiliza para asociar estos enlaces y páginas con el botón adecuado para acceder a ellos.

Tradicionalmente, los faviconos utilizaban un formato de archivo .ico, pero eso ya no es un problema. Cualquier tipo de archivo transparente funcionará en la mayoría de los casos; el formato .png suele ser el preferido.

Consideraciones técnicas

En su día, todos los favicons eran cuadrados súper pequeños de 16 píxeles. Ese ya no es el caso con más pantallas retina de alta definición e iconos de acceso directo a tener en cuenta.

HTML 5 incluye estándares para favicons con múltiples tamaños para todo tipo de usos, desde pequeños iconos del navegador a iconos de la estación de acoplamiento del ordenador a iconos de la pantalla de inicio. Ya ni siquiera es necesario ese cuadrado de 16 píxeles.

Tamaños de favicon modernos y uso:

• 32×32: Estándar para la mayoría de los navegadores de escritorio (sustituye al 16×16)
• 128×128: Tienda de Chrome e icono de pantalla estrella de Windows 8 pequeño
• 152×152: Icono táctil del iPad
• 167×167: Icono táctil del iPad Retina
• 180×180: Icono Retina del iPhone
• 192×192: Recomendación de aplicación web de Google Developer
• 196×196: Icono de la pantalla de inicio de Android

Mejores prácticas

Aunque parezca que un icono tan podría ser insignificante en términos de diseño general, eso está lejos de ser cierto.

Un favicon dice mucho sobre su marca y su sitio web. Los usuarios han llegado a esperarlos si no pueden identificarlos por su nombre. Estos pequeños elementos contribuyen a la experiencia general del usuario y de la marca.

Entonces, ¿cómo puedes sacar el máximo partido a un favicon?

Ten en cuenta estas mejores prácticas:

• Un favicon debe conectarse con la identidad de tu marca, pero a menudo es demasiado pequeño para incluir un logotipo completo. Utilice un elemento identificable, como la primera letra del nombre de su marca o una marca diminuta que utilice junto con la marca.
• Piense en la forma. El espacio para un favicon, por defecto, es cuadrado. Si quieres algo más, es necesario un fondo transparente. Algunos sistemas también pueden redondear los bordes, por lo que es otra consideración a tener en cuenta.
• Asegúrate de que el archivo es pequeño, pero no demasiado. Sube un tamaño de favicon que se represente correctamente en la mayoría de los dispositivos, pero que no entorpezca el sitio web en general.
• Evita las palabras o los elementos complejos en el diseño del favicon.
• Apégate a una paleta de colores sencilla y aerodinámica para el favicon. Es demasiado pequeño para volverse loco con el color. Por eso, la mayoría de estos diminutos iconos utilizan poco más que un color de fondo y otro de primer plano con mucho contraste entre ambos.

Técnicas de diseño

Como un favicon es pequeño, puede que te sientas inclinado a diseñarlo a capricho en Photoshop. Esa no es la ruta recomendada para la longevidad.

Construye tu favicon en una herramienta vectorial como Illustrator o Sketch, y luego exporta el diseño a los tamaños necesarios. Así te asegurarás de que, a medida que cambien las resoluciones de pantalla, tendrás un favicon que resistirá el paso del tiempo. (Todo lo que tendrás que hacer es volver a exportar a un nuevo tamaño.)

La principal regla de diseño visual para los favicons es mantener el diseño simple. No te pases con el color o el texto o los elementos de la marca. Si miras los ejemplos de este post, verás que casi todos estos pequeños elementos son legibles a 16 por 16 píxeles.

Evita trucos como la animación; aquí sólo estorban.

Considéralo un reto de diseño. Puede ser bastante difícil crear algo tan pequeño que sea fácil de leer.

Guarda el archivo como un png transparente. Es un buen hábito que te asegura que no terminarás con bordes extraños o bordes en el favicon. (Nada se ve peor que un borde blanco irregular rodeando el icono.)

Usa los principios del buen diseño. Nunca se sabe cuándo el favicon puede ser utilizado para algo en un tamaño más grande y visible. Guardar un marcador de sitio web, por ejemplo, puede utilizar una versión grande de un favicon. Lo mismo ocurre con el acoplamiento e incluso en las vistas previas de los resultados de los motores de búsqueda.

Aunque sea pequeño, este icono representa tu marca. Diséñalo bien.

Una vez que tengas el archivo listo, puedes añadirlo a tu sitio web con sólo un par de líneas de código. (Muchos temas de WordPress y constructores de sitios web ya tienen un elemento favicon incluido, por lo que ni siquiera tienes que pensar en este paso.

Después de subir el archivo de imagen, inserta el siguiente código en la cabecera de tu sitio web, teniendo en cuenta que «iconpath» y «iconname» se refieren a tu elemento de archivo específico:

Ejemplos

Los ejemplos siguientes incluyen algunos elementos de marca con favicons asociados. (Asegúrese de hacer clic a través y mostrar los diseñadores un poco de amor en sus páginas Dribbble.)

Prodigi.Team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Plantilla de Favicón

Opción de Logotipo 2

Conclusión

Lo que les falta a los favicones en tamaño, lo compensan con la experiencia del usuario. Estos iconos sirven como herramientas de navegación para los visitantes de su sitio y para aquellos que tienden a dejar demasiadas pestañas del navegador abiertas.

Como regla general, un favicon es un identificador visual rápido que vincula al usuario con su presencia digital. Tenga cuidado con él para asegurarse de que es la mejor y más precisa representación de su marca.