¿Qué es un favicon y por qué es importante que lo tenga tu web?

Última actualización: 12/05/2023

Estás a punto de invertir 6 minutos en leer este artículo

En el mundo digital, la identidad visual es esencial para establecer una presencia online coherente.

La imagen de una web es un aspecto fundamental para atraer a los usuarios.

Una de las formas más sencillas y efectivas de mejorarla es a través del uso de un favicon.

En este artículo, te explico qué es un favicon, por qué es importante que lo tengas, cuáles son las características que debe tener, cómo puedes crear uno y cómo implementarlo con facilidad en tu página.

¿Qué es un favicon?

Lo primero que hay que tener claro es qué es un favicon.

Es un pequeño icono que aparece:

En la pestaña del navegador junto al nombre del sitio cuando lo visitas (si estás leyendo este artículo desde un ordenador te tiene que aparecer el favicon de Desenredando la red en la pestaña de tu navegador)
En la barra de marcadores cuando guardas una url
En el historial de navegación
Y, recientemente, en los resultados de búsqueda de Google, tanto en versión móvil como escritorio

Así que un favicon es una marca visual única que ayuda a identificar de forma sencilla y rápida tu website cuando, por ejemplo, tienes una multitud de pestañas abiertas en tu navegador.

Aunque se trata de un elemento muy pequeño y puede parecer un detalle insignificante, es una parte importante de la identidad visual de tu página.

Por esta razón, es esencial que lo tengas y que sea atractivo y representativo.

Favicon de Desenredando la red

Historia del favicon

Los favicon se remontan a la década de 1990, cuando el navegador Internet Explorer de Microsoft los incorporó por primera vez.

Su nombre proviene de la unión de las palabras ‘Favorite’ e ‘Icon’, ya que en ese momento se utilizaban para marcar sitios favoritos en el navegador.

Sin embargo, con el tiempo, se han convertido en una parte relevante de la identidad visual de cualquier website.

¿Por qué es importante tener un favicon?

La respuesta es sencilla: un favicon bien diseñado logra aumentar el reconocimiento de marca y mejora la experiencia del visitante en tu página.

Es considerado como una marca visual de tu web, lo que significa que es una imagen que los usuarios asocian con tu marca.

Y es relevante porque les ayuda a identificar visualmente de manera fácil y rápida tu sitio entre muchas pestañas abiertas en su navegador.

Además, también mejora la apariencia general de la web y la hace que parezca más profesional.

Aunque su implementación no tiene un impacto directo en el SEO, aumenta la experiencia del usuario, lo que a su vez mejorará el posicionamiento de tu website en los resultados de búsqueda.

Los visitantes tienen más probabilidades de permanecer en tu página si se sienten cómodos y confiados, lo que significa que es más probable que compartan tu contenido en las redes sociales y vuelvan a visitar tu web en el futuro.

Además, para el SEO tener un favicon incrementa la tasa de clics (CTR) de tu sitio en los resultados de búsqueda.

Cuando tu website aparece en los resultados de búsqueda, el favicon ayudará a que destaque visualmente y a atraer la atención de los usuarios.

Una vez que hacen clic en uno de tus enlaces, es más probable que permanezcan allí y exploren tu contenido.

Si no lo tienes, es posible que no sepan que están en tu página y la confundan con otra.

Además, tener este elemento hace que tu web se vea más profesional y confiable.

También logra diferenciar una de otra, sobre todo si se visitan muchos sitios en el mismo nicho o categoría.

Es decir, el favicon consigue identificar un website antes de que el visitante entre él.

7 consejos para crear un buen favicon

Estos son algunos consejos que debes tener en cuenta al crear un favicon:

Mantén un diseño simple y limpio: recuerda que es un icono pequeño, por lo que debes asegurarte de que el diseño sea claro y fácil de entender, incluso a tamaño reducido
Evita usar demasiado texto o detalles complejos
Utiliza los colores de tu marca: para que sea efectivo en términos de branding, es recomendable emplear los mismos colores que ya usas en el resto de tu página
Considera la forma y estilo del icono: aunque los favicon suelen ser cuadrados, también puedes explorar otras formas y estilos para hacer que el tuyo sea más distintivo
Prueba diferentes versiones: es importante experimentar con varios diseños para encontrar el que mejor funcione. Puedes probar diferentes combinaciones de colores, formas y estilos para encontrar el que más se adapte a tus necesidades
Asegúrate de que la imagen se adapte bien a las dimensiones del favicon
En la mayoría de las ocasiones, es el logotipo de esa empresa o de esa web

¿Cómo crear un favicon?

Diseñar un favicon es un proceso sencillo que puedes hacer en pocos minutos.

Sigue estos sencillos pasos:

Elige la imagen que quieres usar. Debe ser cuadrada. Si no tienes una adecuada, puedes crear una nueva utilizando herramientas de diseño gráfico online.
Redimensiónala a 16 x 16 píxeles. Puedes hacerlo con programas de edición de imágenes como Photoshop o herramientas en línea gratuitas como Canva.
Guarda la imagen como un archivo .ico, .png, .jpg, .gif o .svg. Para ello, emplea programas como IconWorkshop u online como Favicon Generator. También sirve Photoshop.

Antes, los navegadores solo aceptaban el .ico para un favicon, pero ahora puedes usar cualquier archivo que tenga las extensiones anteriores.

Si quieres adaptarlo a todas las plataformas que existen, deberás prepararlo en diferentes tamaños.

¿Cómo agregar un favicon a tu web?

Una vez que tengas tu favicon, hay varias formas de agregarlo.

Si tu web está hecha en WordPress solo tienes que seguir estos pasos:

En el menú lateral, haz clic en ‘Apariencia’. Después en ‘Personalizar’ y por último en ‘Identidad del sitio’
Busca ‘Icono del sitio’ y pulsa en ‘Seleccionar’
Haz clic en ‘Subir archivos’ y selecciona el archivo de tu favicon
Una vez subido podrás ajustar el tamaño y recortarlo
No te olvides darle al botón de ‘Publicar’ y ya tienes tu favicon en tu website

Si no tienes tu página en WordPress sigue estos pasos.

Sube el archivo a tu sitio.
Colócalo en la raíz del dominio (por ejemplo, https://www.midominio.com/mifavicon.ico).
Agrega el siguiente código en la sección <head> de tu web:

Este código permite que el navegador encuentre el archivo del favicon y lo muestre.