Ejemplos de Favicon, mejores prácticas y técnicas
¿Alguna vez ha prestado atención a esos pequeños iconos en la parte superior de las pestañas de su navegador? ¿Qué tal guardar un acceso directo a un sitio web o página en línea? Esas diminutas imágenes, o favicons, están diseñadas específicamente para este propósito.
Hay una diferencia bastante clara entre lo que hace que un pequeño ícono sea bueno o malo. Se le perdonará que piense que las decisiones de diseño a pequeña escala importan menos. Pero un favicon mal diseñado puede reflejar mal su marca.
Hoy analizamos qué son estos íconos, las técnicas básicas de diseño para ellos y las especificaciones que deberá seguir.
¿Qué es un Favicon?
En pocas palabras, un favicon es un icono pequeño y transparente que se utiliza para representar un sitio web, una marca o una 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 consistente.
El término favicon proviene de «icono favorito». Esta terminología se remonta a 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 de 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 o acceso directo guardado 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 ahora eso es un problema menor. Cualquier tipo de archivo transparente funcionará en la mayoría de los casos; .png suele ser el formato elegido.
Consideraciones técnicas
En un momento, todos los favicons eran pequeños cuadrados de 16 píxeles. Este ya no es el caso con más pantallas retina de alta definición e íconos de acceso directo a considerar.
HTML 5 incluye estándares para favicons de varios tamaños para todo tipo de usos, desde pequeños íconos del navegador hasta íconos de la base del escritorio e íconos de la pantalla de inicio. Ya ni siquiera necesitas ese cuadrado de 16 píxeles.
Dimensiones y uso del favicon moderno:
- 32×32: estándar para la mayoría de los navegadores de escritorio (reemplaza a 16×16)
- 128×128: Chrome Store y 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
Aunque parece un ícono tan insignificante en términos del diseño general, esto está lejos de la verdad.
Un favicon dice mucho sobre su marca y su sitio. Los usuarios esperan verlos si no pueden identificarlos por su nombre. Estos pequeños elementos contribuyen a la experiencia general del usuario y a la marca.
Entonces, ¿cómo puedes aprovechar al máximo un favicon?
Tenga en cuenta estas prácticas recomendadas:
- Un favicon debe conectarse con la identidad de su marca, pero a menudo es demasiado pequeño para incluir un logotipo completo. Utiliza un elemento identificable, como la primera letra del nombre de tu marca o un pequeño cartel que utilices con tu marca.
- Piensa en la forma. El espacio para un favicon, por defecto, es cuadrado. Si desea algo más, se requiere un fondo transparente. Algunos sistemas también pueden redondear los bordes, lo que hace que este sea otro aspecto 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 muestre correctamente en la mayoría de los dispositivos pero que no bloquee todo el sitio web.
- Evite palabras o elementos complejos en su diseño de favicon.
- Cíñete a una paleta de colores simple para tu favicon. Es demasiado pequeño para volverse loco con el color. Es por eso que la mayoría de estos íconos diminutos usan poco más que un color de fondo y de primer plano, con mucho contraste entre los dos.
Técnicas de diseño
Debido a que un favicon es pequeño, es posible que se incline a diseñarlo a su antojo en Photoshop. Esta no es la ruta recomendada para la longevidad.
La principal regla de diseño visual para favicons es mantener el diseño simple. No se exceda con el color, el texto o los elementos de marca.
Construya su favicon en una herramienta vectorial como Illustrator o Sketch, luego exporte el diseño a las dimensiones requeridas. Esto garantizará que, a medida que cambien las resoluciones de pantalla, tendrá un favicon que resistirá 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 favicons es mantener el diseño simple. No se exceda con el color, el texto o los elementos de marca. Mirando los ejemplos en esta publicación, verá que casi todos estos pequeños elementos se pueden leer a 16 por 16 píxeles.
Evite trucos como la animación; simplemente 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 PNG transparente. Es un buen hábito que asegura que no termines con bordes o bordes extraños en tu favicon. (Nada se ve peor que un borde blanco dentado que rodea el ícono).
Utilice los principios del buen diseño. Nunca se sabe cuándo se puede usar el favicon para algo en un tamaño más grande y más visible. Guardar un marcador de sitio, por ejemplo, puede usar una versión grande de un favicon. Lo mismo ocurre con el acoplamiento e incluso con las vistas previas de los resultados de los motores de búsqueda.
Aunque es pequeño, este icono representa tu marca. Diséñalo bien.
Una vez que tenga el archivo listo, puede agregarlo a su sitio web con solo unas pocas líneas de código. (Muchos temas de WordPress y creadores de sitios web ya incluyen un elemento favicon, por lo que ni siquiera tiene que pensar en este paso).
Después de cargar su archivo de imagen, inserte el siguiente código en el encabezado de su sitio web, teniendo en cuenta que «iconpath» y «iconname» se refieren a su elemento de archivo específico:
- Archivo de índice HTML:
- WordPress:/nombre de icono”>
Ejemplos
Los ejemplos a continuación incluyen algunos elementos de marca con favicons asociados. (Asegúrese de hacer clic y mostrarles a los diseñadores algo de amor en sus páginas de Dribbble).
El logotipo receptivo de Prodigi.team
Sistema de logotipo propuesto de Butterscotch
Visualización de iconos de favoritos del logotipo
Plantilla de icono de favoritos
Logotipo TEC Opción 2
Conclusión
Lo que les falta a los favicons en tamaño, lo compensan en la experiencia del usuario. Estos íconos sirven como herramientas de navegación para los visitantes de su sitio web y para aquellos que tienden a dejar abiertas demasiadas pestañas del navegador.
Por regla general, un favicon es un identificador visual rápido que conecta al usuario con tu presencia digital. Tenga cuidado con él para asegurarse de que sea la mejor y más precisa representación de su marca.
