Los favicons son algo que todos hemos visto, sepamos o no lo que son.
Si echas un vistazo a las pestañas abiertas de tu navegador ahora mismo, verás la «W» de Webflow en esta página web. Este pequeño adorno gráfico se conoce como favicon.
Vamos a analizar de dónde vienen los favicons, cómo se utilizan y algunos consejos para diseñar el tuyo propio.
¿De dónde vienen los favicons?
Los favicons se remontan a Internet Explorer 5. En aquel entonces, se alojaban en los directorios raíz de los sitios web con el nombre bastante sencillo de «favicon.ico», que todavía se utiliza hoy en día. Si añadías un sitio web a favoritos en Internet Explorer, aparecía un favicon junto a él en la barra de direcciones y en tu lista de marcadores.
Además de su función como elemento de diseño, los propietarios de sitios web solían medir la popularidad de su página contando cuántas veces se descargaba el favicon. Esas cifras ofrecían un primer vistazo al nivel de interacción de los visitantes. Afortunadamente, las métricas y el seguimiento de las visitas a blogs han avanzado mucho desde aquellos inicios tan rudimentarios.
¿Dónde se utilizan los favicons?
Verás un icono reconocible en cada una de las pestañas de tu navegador; esto ayuda a los visitantes a identificar tu sitio de un vistazo. Puede que sean pequeños —generalmente con una resolución de 16x16 o 32x32 píxeles en pantallas retina—, pero no hay que pasar por alto estos pequeños detalles de identidad visual al crear un sitio web.
La imagen de un favicon puede ser una versión simplificada de un logotipo, un símbolo o incluso un solo carácter. Como deben encajar en el pequeño espacio que ofrecen los navegadores modernos, tienen que ser sencillos, pero impactantes.
- Si observas el código HTML de un sitio web que tiene un favicon, lo verás en la etiqueta <head> con el siguiente formato:
<link rel="icon" type="image/png" href="/my_favicon.png" sizes="16x16"> - Si quieres dar soporte a dispositivos de alta resolución, añade varias etiquetas link con diferentes tamaños. Por ejemplo:
<link rel='icon' type='image/png' href='/my_favicon_32.png' sizes='32x32'><link rel='icon' type='image/png' href='/my_favicon_192.png' sizes='192x192'>Esto ayuda a que tu sitio muestre iconos nítidos en navegadores de teléfonos, tabletas y pantallas grandes. - Es posible que también veas tamaños adicionales de favicon.png en el código, para adaptarse a diferentes aplicaciones y dispositivos; hablaremos de esto un poco más adelante en este artículo. Los favicons no se limitan a las pestañas del navegador y pueden verse en otros lugares donde se enumeran o muestran sitios web.
- Encontrarás favicons en el historial de tu navegador. Tanto si usas Chrome, Safari, Firefox o cualquier otro navegador capaz, aparecerá un favicon junto al sitio web que representa.
- Los favicons también aparecen en los resultados de búsqueda de Google y en las sugerencias automáticas de la barra de búsqueda, así como en los menús desplegables de marcadores y las barras de herramientas del navegador. En estas listas tan concurridas, los favicons nos permiten identificar sitios web sin necesidad de leer ni una palabra.
¿Se pueden usar favicons en diferentes navegadores y plataformas?
Diferentes navegadores y dispositivos pueden requerir distintos tamaños y formatos de archivo para los favicons. Por ejemplo, las versiones antiguas de Internet Explorer dependen de archivos .ico, mientras que los navegadores modernos admiten varios tipos de archivo. También se utilizan con frecuencia los iconos táctiles de Apple (apple-touch-icons) y tamaños específicos para Android. Incluir varios tamaños y formatos de favicon puede ayudar a que tu sitio luzca profesional sin importar quién lo visite.
Diseño web de otro nivel
Desde lo más básico hasta lo avanzado: aprende a crear sitios en Webflow con más de 100 lecciones, incluyendo los fundamentos de HTML y CSS.
Cómo implementar favicons
Los favicons sirven como guías visuales, creando una experiencia de usuario más coherente y una identidad de marca global. Del mismo modo que te esfuerzas por lograr la armonía de los estilos CSS en un diseño web, también debes prestar atención a cómo encaja el favicon en tu tema y marca general.
Algunos ejemplos a tener en cuenta al diseñar tu propio favicon son el botón de reproducción de YouTube, el pájaro azul de Twitter y la «G» colorida de Google. Estos favicons son únicos, identificables al instante y hacen que la marca sea fácil de localizar al escanear las pestañas.
Al crear un favicon igual de memorable, aquí tienes algunas cosas que deberías tener en cuenta
Haz que tu favicon sea pequeño pero legible
Hay varios tamaños de favicon a considerar, pero ten en cuenta que, en su versión más pequeña de 16x16 píxeles, deben ser legibles. Esto significa encontrar un gancho visual que capture la esencia de la marca y permita un reconocimiento instantáneo.
Un gran ejemplo es este uso de texto nítido de uno de nuestros sitios web de diseño favoritos, Behance . Incluso a esta pequeña escala, no falta definición y la imagen parece de alta calidad y es fácilmente identificable.
No te pases de la raya
Con tan poco espacio, lo mejor es optar por el minimalismo. Una de las formas más sencillas de crear un favicon es extraer un elemento de tu logotipo actual.
Aquí tienes algunos ejemplos:
- PetSmart simplifica su logotipo usando la pelota roja que rebota. Este pequeño elemento conecta directamente con su marca y se ve nítido en el espacio de la pestaña.
- Cuando tu logotipo también es un símbolo, es muy fácil usarlo como favicon. El logotipo de Apple es un gran ejemplo de ello.
- Instagram usa el icono de su cámara tanto para el botón de la aplicación como para el favicon, lo que crea una sensación de continuidad de marca en todas las plataformas.
Limítate a unos pocos caracteres
Además de extraer un elemento simbólico de un logotipo, también puedes usar un carácter en tu favicon. Hay muchas marcas que utilizan una sola letra para representar quiénes son.
¿Adivinas de quiénes son estos favicons?
La letra "D" con su trazo característico es reconocible al instante como Disney, la P estilizada en un círculo rojo es de Pinterest, y el cuadrado azul con las letras "in" nos remite a LinkedIn.
Al diseñar un favicon, reducirlo a una o dos letras clave funciona muy bien para representar una marca.
Ten en cuenta la combinación de colores
Más allá de qué sea tu favicon, cómo utiliza el color es igual de importante. Aquí tienes algunas cosas a considerar al decidir qué colores usar:
- El color de fondo de la pestaña del navegador suele ser gris o blanco , o a veces negro si se ha activado el modo nocturno. Al diseñar un favicon, piensa en cómo se verá sobre diferentes colores de fondo. Por ejemplo, Marvel usa solo rojo y blanco, una combinación sólida que destaca sin importar el color de la pestaña.
- Tu lienzo para crear un favicon es un espacio diminuto. Usa una paleta refinada , con colores que combinen bien a una escala minúscula.
- Usa colores con suficiente contraste para que se distingan bien entre sí. La claridad y la definición son fundamentales.
Usa un gráfico vectorial
Aunque pueda resultar tentador crear algo rápido en Photoshop, usar gráficos vectoriales te ayudará en el futuro. Cuando diseñas un favicon en Illustrator, Sketch, Figma o cualquier otra aplicación de diseño vectorial, es mucho más fácil cambiar su tamaño o modificarlo más adelante.
Muchos diseñadores comienzan con un gráfico de favicon basado en SVG y luego lo convierten a archivos no vectorizados como png, gif, jpg o ico.
Considera crear tus favicons con un generador de favicons
Los generadores de favicon son una forma rápida de crear un icono y obtener varios tamaños. También son muy útiles para generar el código HTML que puedes implementar en tus diseños y mostrarlo en diferentes aplicaciones y dispositivos.
Usa el formato de archivo correcto
Hoy en día, el archivo favicon.ico sigue siendo ampliamente compatible con diversos navegadores. Sin embargo, los sitios web más modernos suelen usar favicon.png. Ten en cuenta que Internet Explorer solo admite .ico, por lo que el formato .png no se mostrará. Puedes evitar este problema guardando versiones tanto en .ico como en .png para que el favicon aparezca correctamente en todos los navegadores.
Dale a tus favicons el tamaño adecuado
El tamaño estándar para los favicons es de 16x16 píxeles, pero la mayoría de los diseñadores empiezan con 32x32 píxeles para adaptarse a las pantallas retina. De esta forma, los favicons más grandes se ven genial en pantallas de alta resolución y también pueden reducirse. Por supuesto, existen otros tamaños; vale la pena mencionar que los iconos de Apple (como los de Safari) requieren 180x180, los de Android Chrome necesitan 192x192 y Opera Coast funciona mejor con 228x228. Por lo general, los diseñadores crean varios tamaños para cubrir tanto navegadores de escritorio como otras aplicaciones.
No escatimes con los favicons
Los favicons son importantes. Sin ellos, nuestras pestañas abiertas se ven vacías. Nos quedamos con un montón de espacios grises con texto, algo que no destaca en absoluto.
Los favicons ofrecen pistas visuales que ayudan a la gente a reconocer y, lo que es más importante, a recordar tu marca. Si quieres que tu sitio sea memorable, este pequeño icono puede tener un gran impacto.
Recursos sobre favicons y próximos pasos
Para obtener más ayuda con el código o la configuración multiplataforma, la documentación oficial de navegadores como Chrome y Firefox ofrece pautas actualizadas. Experimenta con diferentes formatos de archivo y revisa tus estadísticas para ver cómo interactúan los visitantes con tu marca.
Crea sitios web que dan resultados.
Diseña visualmente, publica al instante y escala de forma segura y rápida. Todo con la plataforma de marketing web con IA de Webflow.
