¿Qué es un favicon? Cómo añadir un favicon a tu sitio web

El dicho de "las cosas buenas vienen en envases pequeños" se puede aplicar perfectamente al favicon. Estos pequeños emblemas de marca han estado presentes en los navegadores web desde los días de Internet Explorer de la década de 1990, y aparecía en las pestañas del navegador y en las vistas de marcadores. 

Los favicones son recordatorios visuales que ayudan a los clientes a asociar tu sitio web con la identidad de marca de tu empresa.

Es hora de dejar atrás el icono genérico del navegador: en poco tiempo, puedes crear un favicon memorable para los visitantes de su sitio web (y ayude a tus clientes a navegar entre las innumerables pestañas de su navegador).

¿Qué es un favicon?

Un favicon es una pequeña imagen que aparece junto al título de la página de cada pestaña del navegador, en la barra de marcadores, en los resultados del historial del navegador y en las páginas de resultados de motores de búsqueda (SERPs).

Su nombre deriva del inglés favorites icon (icono de favoritos) y sirve como un marcador visual para tu sitio web y ayuda a las personas a identificar fácilmente una página web cuando tienen varias pestañas abiertas. 

También, los favicones pueden aparecer como iconos de acceso directo en la barra de tareas cuando el sitio web está minimizado. Cuando los usuarios añaden tu sitio web a sus marcadores, el favicon también actúa como un icono de marcador, facilitando la búsqueda del sitio entre el resto de páginas web guardadas.

En algunos sistemas operativos, arrastrar y soltar la URL desde la ventana del navegador al escritorio crea iconos de acceso directo en el escritorio. Los favicones de los navegadores también se suelen reutilizar como iconos de acceso directo.

Beneficios de usar favicones

• Aumenta la tasa de clics (CTR)
• Mejora el reconocimiento de marca
• Mejora la experiencia del usuario y el tiempo de permanencia

Un favicon no aumenta mágicamente el ranking de optimización para motores de búsqueda (SEO) de tu sitio web, pero añadir uno, junto con otras mejoras en el diseño de UX, puede contribuir a mejorar la navegación del sitio web para el usuario. Estas hay algunas formas en que un favicon puede beneficiar al rendimiento de tu sitio web:

Aumenta la tasa de clics (CTR)

Google y otros motores de búsqueda muestran los favicones en los resultados de búsqueda. Un favicon bonito o fácilmente reconocible puede aumentar tu reconocimiento de marca, porque aumenta las posibilidades de que las personas visiten tu sitio web. Esto incrementa tu tasa de clics (CTR), que constituye una importante métrica en el SEO de ecommerce.

Mejora el reconocimiento de marca

Cuando una marca refuerza su logo con un favicon, este actúa como un anuncio gratuito en la barra de marcadores del usuario, en la pestaña de tu sitio web y en las SERPs, por lo que el reconocimiento de marca puede mejorar.

Mejora la experiencia del usuario y el tiempo de permanencia

Un favicon que se asocie inmediatamente con tu marca puede aumentar las probabilidades de que un usuario añada tu página web a sus marcadores favoritos, una acción que un motor de búsqueda como Google reconoce como una señal de mejora. 

Esta pequeña mejora en la experiencia del usuario fomenta visitas de retorno y, por lo tanto, aumentando el tráfico de tu sitio web y el tiempo de permanencia (es decir, el tiempo que un usuario pasa en una página web antes de regresar a la página de resultados).

Directrices para crear un favicon para tu sitio web

1. Elige el tamaño adecuado
2. Elige un formato de archivo compatible
3. Considera un favicon animado

Ahora que ya sabes qué es un favicon, estos son los requisitos de tamaño y formato que debes cumplir para crear un favicon:

Elige el tamaño adecuado

El tamaño ideal para un favicon es de 16 píxeles por 16 píxeles, aunque algunos favicones se diseñan en 32 x 32 o en 48 x 48 píxeles. El tamaño de 16 x 16 es compatible con todas las visualizaciones de navegadores web: la barra de direcciones, las pestañas o las vistas de marcadores. Se trata, pues, de la opción más segura.

Elige un formato de archivo compatible

El formato de archivo original juega un papel importante en cómo de bien se transforma una imagen en un favicon. Los formatos de archivo de favicon más comunes son PNG e ICO. Los archivos PNG comprimen los datos sin pérdida y tienen transparencia, por lo que la calidad de la imagen no se ve afectada al escalarla. 

Los archivos ICO, utilizados en el Explorador de Windows, contienen una o más imágenes en múltiples tamaños y profundidades de color, por lo que pueden escalarse bien. El formato SVG no tiene tanto soporte en navegadores, pero es de carga rápida y escalable de manera infinita. Evita formatos como JPEG que cuando se reducen pierden algunos datos de imagen.

Considera un favicon animado

Los GIF animados o archivos de Javascript añaden dinamismo, pero también tienen sus limitaciones, como la compatibilidad con algunos navegadores. Antes de validarlo, no olvides probar tu favicon animado en distintos navegadores: es posible que lo que se ve genial en Google Chrome no funcione en otro navegador.

Generadores de favicones populares

Después de aprender qué es un favicon, puedes utilizar un generador de favicones en línea para crear un favicon personalizado que complemente tu identidad de tu marca. Estas son algunas opciones populares:

• Favicon.io te permite crear un favicon a partir de un archivo de imagen, un enlace o texto y convertirlo a diferentes formatos. Descarga los archivos convertidos, colócalos en el directorio raíz de tu sitio web, copia las etiquetas de enlace y pégalas en la etiqueta “head” de tu página HTML.

• RealFaviconGenerator es una API interactiva que te permite especificar a la web cómo debe manejar la imagen para generar el favicon.

• Generador de favicones de Website Planet crea favicones en el tamaño correcto a partir de un archivo PNG.

• Favicon.ico & App Icon Generator de Dan’s Tools te permite subir una imagen existente y convertirla al formato ICO, o explorar diseños en la galería de iconos.

Cómo añadir un favicon a HTML

Una vez que hayas creado el favicon de tu sitio, necesitarás subirlo a tu sitio web y añadir algo de código para que los navegadores y aplicaciones web puedan mostrarlo.

Un indicador al favicon aparece como una línea de código en la sección <head> del archivo HTML del sitio web. Los navegadores leen las instrucciones en la etiqueta head para encontrar el favicon y mostrarlo. Por ejemplo, si tu archivo favicon es un archivo PNG llamado “iconomarcaX.png., añade simplemente esta línea dentro de la etiqueta <head></head>:

<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/iconomarcaX.png">

El favicon puede aparecer en cualquier directorio del sitio. En el ejemplo, está contenido en el directorio raíz del sitio, una ubicación común. Verifica que la ruta del archivo coincide donde realmente está el favicon.

También es posible tener más de un tamaño de favicon y cargarlos todos. Necesitarás una línea de código para cada tamaño, todas dentro de la etiqueta <head> </head>. Asigna a cada tamaño un nombre de archivo único y añade un atributo “sizes” al código, así:

<link rel="icon" type="image/png" sizes=”16x16” rel="noopener" target="_blank" href="/iconomarcaX16x16.png">

<link rel="icon" type="image/png" sizes=”32x32” rel="noopener" target="_blank" href="/iconomarcaX32x32.png">

Cómo añadir un favicon a un sitio web de Shopify

Si tienes un sitio web de Shopify, puedes añadir fácilmente un favicon sin necesidad de codificación:

1. En un navegador web de escritorio, ve a tu panel de administración de la tienda en línea.
2. Selecciona “Temas” > “Personalizar” para abrir el editor de temas.
3. Haz clic en “Configuración de temas” y busca el icono de engranaje.
4. Selecciona Favicon (en algunos temas se llama “Logotipo”).
5. Selecciona tu imagen de la Biblioteca de la tienda o sube una nueva.
6. Si la opción está disponible, edita el “Texto alternativo” de favicon para mejorar la accesibilidad. Así, cuando un usuario pase el cursor por el favicon, aparecerá el texto que has escrito en este apartado.
7. Guarda los cambios y prueba el rendimiento del favicon en distintos navegadores.

Para más información sobre cómo añadir favicones desde un dispositivo iPhone o Android, consulta el centro de ayuda de Shopify sobre este tema.

Cómo añadir un favicon en WordPress

Si tu tienda en línea es un sitio web de WordPress, aquí tienes una guía paso a paso para añadir un favicon:

1. Ve al panel de WordPress y haz clic en “Apariencia”.
2. Haz clic en “Personalizar” para ver la lista de opciones.
3. Haz clic en “Identidad del sitio”. Este apartado controla aspectos como el título, el eslogan y el logotipo.
4. En el apartado “Icono del sitio”, haz clic en “Seleccionar icono del sitio” para subir la nueva imagen del favicon.
5. Haz clic en “Publicar” para que tus cambios sean visibles.
6. Comprueba que el favicon se ve bien en distintos navegadores web.

Cómo añadir un favicon en Wix

Un sitio web de Wix viene con un favicon predeterminado, pero los miembros del Plan Premium pueden personalizarlo. Para cambiar el favicon en tu sitio de Wix:

1. Ve a “Configuración” en el panel de control del sitio.
2. Junto a Favicon, haz clic en “Administrar”.
3. Haz clic en “Subir imagen” o en “Subir medios” para cargar una imagen desde tu ordenador.
4. Haz clic en “Añadir a la página”. Previsualiza la apariencia del favicon en la pestaña de tu navegador.
5. Haz clic en “Guardar” y luego en “Publicar”.