Explicación rápida de qué es un Favicon
Los favicons facilitan a los usuarios la identificación de tu página web cuando tienen muchas pestañas abiertas en su navegador web. Usualmente, los favicons se muestran en el navegador justo antes de la URL. También se pueden ver favicons en marcadores, resultados de autocompletar de Google e historial de búsqueda.
Los favicons se pueden definir como íconos que se utilizan como parte de la marca de una página web. Un favicon podría ser el logotipo de una marca, un personaje o un conjunto de caracteres, parte del logotipo o incluso una imagen genérica que represente el tipo de negocio o industria en la que se encuentra la compañía.
En este artículo vamos a analizar por qué no se ven los favicons y cómo solucionar este problema
Cómo instalar Favicons correctamente
Si quieres que tu favicon se renderice adecuadamente, tienes que instalarlo correctamente. En primer lugar, crea un favicon.
Hay muchos generadores de favicon que puedes usar para ello. A continuación, añádelo a tu página web. Aquí puedes ver cómo instalarlo en las páginas principales de tu sitio web:
- Sube el archivo favicon.ico en el directorio elegido de tu sitio.
- Incluye este código en la sección <head></head>: <link rel="shortcut icon" href="images/favicon.ico">
- ‘images’ tiene que remplazarse con el directorio donde se almacena tu favicon.
- ‘favicon.ico’ tiene que remplazarse con el nombre de tu icono.
- Ten en cuenta que el valor rel también puede ser ‘icon’, ‘apple-touch-icon’ o ‘apple-touch-icon-precomposed’.
- El valor href puede ser una ruta relativa (cuando usa la ruta del archivo donde se almacena el favicon) o una URL absoluta (donde usa tu dominio y añade el archivo favicon a la URL como en https://abc.com/favicon.ico).
En este artículo puedes ver más información sobre cómo añadir favicons. También puedes leer sobre las instrucciones de Google para los favicons.
Razones comunes por las que no se ve tu Favicon
Puedes comprobar si tu favicon se muestra correctamente usando una herramienta de auditoría:
Estas son las razones más comunes por las que tu favicon no se muestra y cómo solucionar los problemas:
Errores de sintaxis
Un simple error de sintaxis en el código que usas para implementar tus favicons, puede hacer que no se vea tu favicon. Fíjate en el siguiente ejemplo:
<link rel="icon" type= "image/x-icon" href ="https://www.abc/com/drive/uploads/2019/10/favicon.ico/">
El código de arriba tiene 1 sencillo error de sintaxis: El enlace href no tiene comillas de cierre.
Tu navegador ha almacenado en caché tu sitio como si no tuvieras favicon
Cuando añades un favicon a tu sitio, puede que no aparezca ya que tu navegador ha “guardado” tu página web como si no tuviera favicon.
Tienes que borrar el caché de tu navegador o usar un navegador diferente.
Alternativamente, añade /favicon.ico a tu nombre de dominio como en www.abc.com/favicon.ico
Ruta de archivo incorrecta
Tienes que asegurarte que la ruta de archivo de tu favicon es la correcta. Si tienes tu icono en la carpeta de imágenes, asegúrate de que la ruta de tu archivo tenga /images/favicon.ico según el nombre que le hayas puesto a tu icono.
Si tu CSS e ícono son hermanos, en el sentido de que están en el “mismo nivel”, asegúrate de no tener una barra antes del nombre del archivo del favicon, ya que su href debería ser el siguiente:
href="favicon.ico"
El navegador no muestra favicons si son locales
Los navegadores como Chrome y Safari no muestran favicons si son locales (no se han subido a un servidor). Chrome, por ejemplo, solo puede mostrar el favicon si está ubicado en la carpeta de descargas.
El enlace para crear el favicon no está en la ubicación correcta
Al añadir tu favicon, es importante colocar la ubicación correcta en el enlace. Debe colocarse en la sección del encabezado de tu página web y no en ningún otro lugar. Aunque en algunos navegadores puede funcionar si se coloca en el cuerpo, otros navegadores como Chrome no lo cargarán.
El nombre de archivo de tu favicon sigue siendo el nombre de archivo predeterminado
A veces, la razón por la que tu favicon no se ve es porque no cambiaste el nombre del archivo. La solución más sencilla consiste en cambiar el nombre del archivo del favicon del predeterminado, ‘favicon.ico’.
Centrémonos ahora en por qué los favicons no se ven en Chrome, WordPress, Shopify, Wix y Squarespace.
Razones por las que un Favicon no se ve en Chrome en específico
Estas son las razones por las que es posible que tu favicon no se vea en Chrome:
El tamaño del favicon no es el correcto
Ya hemos comentado que Google tiene unas instrucciones específicas que hay que seguir al añadir los favicons a tu página web. Una de ellas es que el tamaño del icono debe estar en múltiplos de 48 y no puede ser 16×16. Si el tamaño de tu icono es 16x16, no se mostrará.
Content Management Systems (CMS) también tiene tamaños específicos que recomiendan. WordPress recomienda 512 x 512 y Squarespace 300 x 300. Estos CMS pueden cambiar el tamaño del favicon para adaptarse a diferentes escenarios. Por ejemplo, se necesita un tamaño más grande para los marcadores, mientras que puede ser necesario un tamaño más pequeño para los dispositivos móviles.
Este artículo explora los diferentes tamaños de favicon, dónde se adaptan mejor e incluso los tamaños obsoletos.
Tener el archivo del favicon en el directorio raíz, pero sin añadir el enlace que lo ‘importa’
El hecho de que el archivo del favicon esté en tu directorio raíz, no significa que se cargará automáticamente cuando se cargue tu página web. Asegúrate de tener estos enlaces en tu encabezado:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Estos son los que importarán el favicon a tu sitio.
Razones por las que el Favicon no se ve en Shopify en específico
Estas son las razones por las que es posible que tu favicon no se muestre en Shopify:
El enlace para importar el favicon está en la ubicación incorrecta
El lugar donde coloques tu enlace es importante. Asegúrate de que está en la sección <head> </head> y no en <header></header>.
Ver cómo añadir un favicon a tu tienda online Shopify.
Razones por las que el Favicon no se ve en WordPress en específico
Estas son las razones por las que es posible que tu favicon no se muestre en WordPress:
En Personalizar, el icono del sitio está destinado al favicon de AMP
Si usas Personalizar para cargar un favicon personalizado, es posible que no funcione, ya que está destinado a páginas que usan AMP. Para solucionar este problema, primero debes eliminar el favicon que habías cargado con Personalizar. A continuación, debes instalar un complemento llamado “Favicon by RealFavicon Generator”.
Este complemento te permite cargar la imagen que quieres usar como tu favicon. Debe estar en formato png o jpg. El complemento te ayudará a convertirlo a .ico.
Podría haber un complemento (plugin) que añada elementos del cuerpo en tu <head></head>
Tienes que asegurarte que no tienes un complemento que esté creando elementos de cuerpo en tu sección <head></head>. Revisa tu sección principal y fíjate si ves un código que pertenece a la sección del cuerpo. Verifica los complementos que habías instalado al añadir tu favicon a tu página de WordPress. Desactívalo o incluso desinstálalo.
No especificaste el tipo de imagen si no es .ico
Si tu icono está en formato .png, tendrás que editar el enlace que estás utilizando para cargar el favicon e incluir el tipo de la siguiente manera:
<link rel ="icon" href="yourpath" type="image/png">
También tienes que añadir el archivo .ico a la raíz del sitio.
Aprende cómo añadir el favicon a una página WordPress.
Razones por las que el Favicon no aparece en Squarespace en específico
Estas son las razones por las que es posible que tu favicon no se muestre en Squarespace:
La versión en el caché todavía no está invalidada
El código de plantilla en la sección <head></head> siempre usa ‘favicon.ico’ como nombre de archivo. Esta es la versión en el caché. Para invalidarlo, cambia el nombre del archivo.
Todavía estás conectado al CMS
Si todavía estás con tu sesión activa en tu CMS, es posible que aún muestre el ícono predeterminado de Squarespace. Debes cerrar la sesión en CMS para poder ver tu favicon personalizado.
Conclusión
Los favicons son útiles para ayudar con la consistencia de la marca. Hacen que tu página web sea fácilmente identificable cuando el usuario tiene que identificar varios sitios de un vistazo; como por ejemplo, cuando hay muchas pestañas abiertas. Son excelentes para los visitantes y clientes habituales. Cuando un usuario marca tu sitio como favorito, los favicons lo hacen fácilmente identificable.
Es posible que la implementación de favicons no siempre sea fácil y hemos analizado las razones comunes por las que los favicons no se ven. Incluso hemos explorado los problemas que pueden surgir al utilizar sistemas de gestión de contenido específicos (CMS) como WordPress, Shopify o SquareSpace. Como habrás notado, la mayoría de los problemas son bastante simples y puedes solucionarlos. Sin embargo, no dudes en pedir ayuda profesional cuando sea necesario.
