Ejemplos de Favicon, mejores prácticas y técnicas

¿Alguna vez prestas atención a esos pequeños íconos en la parte superior de las pestañas del navegador? ¿Qué tal cuando guarda un acceso directo a un sitio web o página en línea? Esas pequeñas imágenes, o favicons, están diseñadas especialmente para ese propósito.

Hay una diferencia bastante clara entre lo que hace que un icono pequeño sea bueno o malo. Sería perdonado por pensar que las decisiones de diseño a pequeña escala son menos importantes. Pero un favicon mal diseñado puede reflejar mal en su marca.

Hoy estamos viendo qué son estos íconos, técnicas básicas de diseño para ellos y las especificaciones que deberá seguir.

Explore los elementos de Envato

¿Qué es un favicon?

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

El término favicon proviene de "icono favorito". Esta terminología data de los días de Internet Explorer cuando las páginas marcadas se llamaban "Favoritos". El favicon fue adoptado por primera vez por el World Wide Web Consortium (W3C) para HTML 4.0, alrededor del año 2000, y comenzó a aparecer de manera más consistente en las ventanas del navegador al año siguiente.

Use favicons para cambiar rápidamente entre las pestañas del navegador, identificar un marcador o encontrar una aplicación guardada o acceso directo en su teléfono. El identificador visual es lo que la mayoría de la gente usa para asociar estos enlaces y páginas con el botón derecho para acceder a ellos.

Tradicionalmente, los favicons usaban 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; .png es a menudo el formato de elección.

Consideraciones tecnicas

Hubo un tiempo en que todos los favicons eran cuadrados súper pequeños de 16 píxeles. Ese ya no es el caso con más pantallas de retina de alta definición e íconos de acceso directo para considerar.

HTML 5 incluye estándares para favicons con múltiples tamaños para todo tipo de usos, desde pequeños íconos de navegador hasta íconos de estación de acoplamiento de computadora hasta íconos de pantalla de inicio. Ya ni siquiera necesitas ese cuadrado de 16 píxeles.

Tamaños y uso de favicon modernos:

• 32 × 32: estándar para la mayoría de los navegadores de escritorio (reemplaza a 16 × 16)
• 128 × 128: Chrome store y un pequeño icono de pantalla de estrella de Windows 8
• 152 × 152: icono táctil del iPad
• 167 × 167: icono táctil iPad Retina
• 180 × 180: icono de iPhone Retina
• 192 × 192: recomendación de la aplicación web para desarrolladores de Google
• 196 × 196: icono de la pantalla de inicio de Android

Mejores prácticas

Si bien parece un icono que podría ser insignificante en términos del diseño general, eso está lejos de ser cierto.

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

Entonces, ¿cómo puedes aprovechar al máximo un favicon?

Tenga en cuenta estas mejores prácticas:

• Un favicon debe conectarse a la identidad de su marca, pero a menudo es demasiado pequeño para incluir un logotipo completo. Use un elemento identificable como la primera letra de su nombre de marca o una pequeña marca que use junto con la marca.
• Piensa en la forma. El espacio para un favicon, por defecto, es cuadrado. Si desea algo más, es necesario un fondo transparente. Algunos sistemas también pueden redondear los bordes, lo que es otra consideración a tener en cuenta.
• Asegúrese de que el archivo sea pequeño, pero no demasiado pequeño. Cargue un tamaño de favicon que se procesará correctamente en la mayoría de los dispositivos, pero que no bloqueará el sitio web en general.
• Evite palabras o elementos complejos en el diseño de favicon.
• Apéguese a una paleta de colores simple y estilizada para el favicon. Es demasiado pequeño para volverse loco con el color. Es por eso que la mayoría de estos pequeños íconos usan poco más que un color de fondo y primer plano con mucho contraste entre los dos.

Técnicas de diseño.

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

La principal regla de diseño visual para los favicons es mantener el diseño simple. No se vaya por la borda con color, texto o elementos de marca.

Construya su favicon en una herramienta vectorial como Illustrator o Sketch, luego exporte el diseño a los tamaños necesarios. Esto asegurará que a medida que cambien las resoluciones de pantalla, tenga un favicon que resista el paso del tiempo. (Todo lo que tendrá 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 se vaya por la borda con color, texto o elementos de marca. Mirando los ejemplos en esta publicación, verá que casi todos estos pequeños elementos son legibles a 16 por 16 píxeles.

Evita trucos como la animación; solo se interponen en el camino aquí.

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

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

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

Aunque es pequeño, este icono representa su marca. Diséñalo bien.

Una vez que tenga el archivo listo, puede agregarlo a su sitio web con solo un par de líneas de código. (Muchos temas de WordPress y creadores de sitios web ya tienen un elemento favicon incluido, por lo que ni siquiera tiene que pensar en este paso).

Después de cargar el archivo de imagen, inserte el siguiente código en el encabezado de su sitio web, observando que "iconpath" y "iconname" se refieren a su elemento de archivo específico:

• Archivo de índice HTML:
• WordPress:

Ejemplos

Los ejemplos a continuación incluyen algunos elementos de marca con favicons asociados. (Asegúrese de hacer clic y mostrar a los diseñadores algo de amor en sus páginas de Dribbble).

Logotipo receptivo de Prodigi.team

Sistema de logotipo propuesto de Butterscotch

Logotipo Favicon Display

Plantilla Favicon

Logotipo TEC Opción 2

Conclusión

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

Como regla general, un favicon es un identificador visual rápido que vincula al usuario con su presencia digital. Cuídalo para asegurarte de que sea la mejor y más precisa representación de tu marca.