Prácticas recomendadas para favicones

¿Qué es un favicon?

Un favicon es un icono de navegador que representa tu marca. La mayoría de la gente se fija en los que aparecen en la pestaña junto al nombre de una empresa, pero también están en las páginas de resultados de búsqueda, las barras de herramientas, las listas de favoritos, las barras de direcciones y otras partes de la web. Se han vuelto tan cruciales para la identidad de la marca y el SEO que también aparecen en los resultados de búsqueda móvil.

Los favicones son un gran elemento de diseño que tuvo un comienzo muy interesante. Solían estar enterrados en el directorio raíz de un sitio web cuando operaba Internet Explorer 5. También solían realizar un seguimiento del número de veces que un visitante llegaba a un sitio web.

Si tienes un sitio web, debes tener un favicon para tu página de destino. De hecho, las páginas de destino independientes también necesitan favicones para aumentar el conocimiento de la marca. Mejora el nivel de profesionalidad que estás mostrando al público, y, cuando la gente vea tu favicon, lo recordará.

¿Dónde aparecen los favicones?

Estos son solo algunos lugares donde encontrarás favicones:

• Pestañas del navegador
• Historial del navegador
• Barra de búsqueda
• Aplicaciones de la barra de herramientas
• Menú desplegable del historial del navegador
• Recomendaciones de la barra de búsqueda
• Menú desplegable de los marcadores

Dondequiera que tengas una huella en línea, es importante tener un favicon en ese punto de contacto.

¿Por qué son importantes los favicones?

Aunque un favicon es solo una pequeña representación de tu marca, es importante. Uno de los principales objetivos de una empresa y una marca es ganarse la confianza y la lealtad del consumidor. Cuantas más posibilidades tengan de ver tu huella, más empezarán a reconocerte y a esperar verte.

Todos los creadores de sitios web deberían integrar un favicon en el diseño del sitio y, si utilizas un creador de sitios web de arrastrar y soltar, deberían tener un espacio en el que puedas cargar un favicon tú mismo. Estas son otras razones por las que los favicones son una pieza importante para tu marca:

Fortalecer la identidad de la marca

Una marca cohesionada hace maravillas con tu público objetivo. Los usuarios de tu sitio o tienda online lo ven todo. Un favicon trabaja en su beneficio hablando con la voz de tu marca sin pronunciar una palabra ni necesitar un anuncio. De forma predeterminada, el favicon es una extensión de tu marca.

Mejora la experiencia del usuario

El favicon ayuda a los usuarios a encontrar tu sitio fácilmente en un mar de otras pestañas o aplicaciones. Esto les facilita volver una y otra vez. En un dispositivo móvil, el favicon tiene un impacto definitivo y duradero. Los favicones pueden ayudar a mejorar tu SEO de formas sutiles. Cuando tengas un favicon en las pestañas de tu navegador, en los archivos del historial y en tus marcadores, los usuarios interactuarán continuamente con tu sitio. Esto aumenta las interacciones, lo cual puede mejorar tu SEO general.

Tu SEO también mejora porque el favicon proporciona una ventaja competitiva cuando aparece en los marcadores. Si tu sitio web no tiene un favicon, es posible que no pueda marcarse en un navegador como Chrome, porque extrae ciertas señales de clasificación de búsqueda de sitios marcados en la web.

Añade un elemento de credibilidad y profesionalidad

Ya se ha mencionado anteriormente, pero el favicon muestra que te importa tu marca, cómo ve tu público tu marca y lo profesional que es tu negocio. Proporciona a los usuarios una sensación de confianza, de que están con una marca en la que pueden confiar.

¿Cuál es el mejor tamaño de favicon?

Las dimensiones del favicon varían según dónde se utilice. El tamaño de favicon más común es de 16x16 píxeles. Sin embargo, hay lugares donde el tamaño del favicon debe ser un poco mayor. Aquí tienes un buen desglose de las dimensiones de los favicones y sus usos en píxeles:

• Favicones de navegador: 16x16
• Iconos de acceso directo a la barra de tareas: 32x32
• Iconos de acceso directo de escritorio: 96x96
• Iconos táctiles de Apple: 180x180
• Tamaño de WordPress: 512x512

Puede parecer extraño que se necesiten tantos tamaños de favicon diferentes, pero hay muchas formas en las que el tamaño de un favicon puede cambiar según la plataforma y su interfaz de usuario.

Cómo crear un favicon para tu página web

Una de las cosas más importantes que hay que recordar sobre la creación de un favicon es que debe ser visible y nítido. Es importante utilizar una versión de alta calidad de tu logotipo. Es importante considerar el tamaño de un favicon para tener la mejor representación de tu marca.

Entonces, ¿qué implica crear un favicon? Piensa en cómo quieres que se vea tu favicon. Muchas marcas tienen un único logotipo que se utiliza para ciertas cosas. Crear un favicon especial que se alinee con tu marca es una gran idea. Si bien la gente puede pensar que un favicon es solo una versión más pequeña de su logotipo principal, puede ser mucho más que eso. Hacer que este aspecto forme parte de los esfuerzos creativos de tu marca mantiene la cohesión a la vez que causa impacto.

Tipos de archivo de favicones

Una de las cosas más importantes a tener en cuenta a la hora de crear un favicon para tu sitio web y usarlo en toda la web es el tamaño de favicon con el que debes trabajar. Dependiendo de dónde vaya a residir el favicon, el formato importa. Estos tipos de archivos se utilizan para crear favicones duraderos que sean brillantes y nítidos:

• SVG: SVG solía ser una ocurrencia a posteriori, pero se ha hecho muy popular en el entorno creativo. No era ampliamente compatible con navegadores, pero las cosas están avanzando en una dirección positiva. Los navegadores también pueden mostrar los GIF como favicones, pero son difíciles de ver. Los archivos SVG son conocidos por ofrecer imágenes de alta calidad sin comprometer el aspecto, la velocidad o el rendimiento del sitio.
• PNG: Los archivos PNG son muy populares para crear favicones, ya que es un formato de archivo ampliamente utilizado por los creadores. Son ligeros y se cargan rápidamente. Si se utilizan diseños con fondos transparentes, este es el formato que se debe utilizar.
• JPG: Los archivos JPG no suelen utilizarse para favicones, ya que no tienen el mismo nivel de calidad de que un PNG.
• Windows ICO: Este era el tipo de archivo original y todavía lo utilizan los diseñadores. Este tipo de archivo puede tener múltiples profundidades y resoluciones de bits.

Consejos para hacer un favicon

Al crear un favicon, hay algunas reglas que debes seguir para obtener los mejores resultados. También puedes considerar el uso de un generador de favicones. Estas herramientas convertirán tu imagen al formato adecuado para descargarla. Estos son algunos generadores de favicones populares a tener en cuenta:

• Favicon.ico y App Icon Generator: Se puede cargar un PNG o JPG para devolverlo en formato ICO o PNG en varios tamaños. Esta es una forma sencilla y fácil de generar favicones para una gama de plataformas diferentes.
• Favikon: Este generador es muy fácil de usar. Sube tu imagen, recórtala y descárgala en formato PNG o ICO para usarla. Desafortunadamente, este generador solo produce tamaños de 16x16 píxeles. Si necesitas algo más grande, no funcionará.
• Favicon.io: Esta herramienta puede ayudar a crear un favicon completamente nuevo desde cero, o uno a partir de un emoji, logotipo o imagen. Los usuarios pueden previsualizar el favicon en tres tamaños diferentes para descargarlo.

A continuación, se ofrecen consejos adicionales que debes tener en cuenta al determinar el diseño y el tamaño de un favicon:

Que sea sencillo

Al crear un favicon, es bueno considerarlo como una especie de extensión de tu logotipo. Debe reflejar la imagen de tu marca. Eso significa que debes tener en cuenta el espacio. Debes asegurarte de que sea brillante y atractivo. Si tienes un logotipo basado en palabras para tu marca y quieres permanecer totalmente fiel a él, es mejor crear un favicon con la primera letra de la palabra. También es importante mantener intactos los elementos centrales para lograr el mismo aspecto, sensación y cohesión.

Si tienes un logotipo de marca, el espaciado también es un problema. Estas son las mejores representaciones, ya que es posible que no tengas que hacer mucho. Un logotipo icónico tiene tanto de marca como de marca denominativa. En estos casos, solo se utiliza la marca comercial para el favicon. La compatibilidad del navegador también es un factor, ya que todos tienen requisitos diferentes. Recuerda siempre tener en cuenta el tamaño del favicon.

Representa tu marca

Es una representación de tu marca y debe estar en consonancia con tus colores y tu estrategia. Este elemento visual debe seguir formando parte del sitio web, utilizando la voz y el lenguaje visual de tu marca. La combinación de colores debería integrarse fácilmente en el diseño. Tu favicon puede mostrarse sobre diferentes fondos que pueden variar de lo que estás acostumbrado. Es importante probar el favicon sobre fondos negros, grises y blancos antes de finalizar el diseño. Esto evitará el trabajo adicional.

Evitar el texto

El texto debe evitarse a toda costa. Dado que el favicon es tan pequeño, será muy difícil leer lo que dice. Utilizar la primera letra del nombre de la marca en un logotipo de palabra es inteligente y se puede diseñar para añadir un toque adicional a la marca. Si se debe utilizar texto, debe tener entre uno y tres caracteres solamente. Si puedes utilizar iniciales para conseguir el mismo efecto, también es una buena idea. El objetivo es fortalecer la marca, no debilitarla.

Notas finales

Ahora ya comprenderás por qué los favicones son una parte tan importante de tu marca y cómo pueden ayudar a posicionarla durante mucho tiempo con un aspecto profesional. Ten en cuenta dónde aparecen los favicones y cómo su tamaño puede afectar a su aspecto. El diseño general del favicon debe tener en cuenta la simplicidad y la representación de la marca.

Puedes crear un sitio web, una tienda online y mucho más con el gestor de contenidos de Mailchimp. Echa un vistazo a las muchas funciones que ofrece Mailchimp que funcionan juntas para mejorar tu marca mientras proyectas un aspecto cohesivo y profesional en todo tu espacio web.