Abres Chrome, cargas tu sitio y la pestaña muestra un globo genérico o un cuadrado en blanco en lugar de tu icono. Revisas el HTML, el archivo existe, pero Chrome sigue negándose a mostrarlo. Esta es una de las quejas más comunes sobre favicons que escuchamos de los desarrolladores. La buena noticia: en la mayoría de los casos, la solución toma menos de dos minutos.

Solución rápida: fuerza una recarga completa y revisa la pestaña Network

Antes de tocar cualquier código, descarta la causa más simple: Chrome está sirviendo una versión en caché de tu favicon antiguo (o un 404 en caché). Chrome almacena los favicons en caché de forma agresiva, a veces durante días.

  1. Abre tu sitio en Chrome.
  2. Abre DevTools (F12 o Cmd+Option+I).
  3. Ve a la pestaña Network y marca Disable cache.
  4. Recarga la página con una recarga completa (Ctrl+Shift+R o Cmd+Shift+R).
  5. En el cuadro de filtro de Network, escribe favicon.

Si ves una solicitud de favicon.ico que devuelve un 404, Chrome seguirá mostrando el globo predeterminado. Si ves un 200 pero el icono aún no se actualiza, la imagen en caché es el problema. Una recarga completa normalmente lo soluciona. Si no, abre chrome://settings/clearBrowserData, selecciona Cached images and files y borra. Eso elimina la caché de favicons de Chrome sin borrar tus contraseñas ni tu historial.

Causa raíz 1: Chrome solicita favicon.ico y tu sitio no tiene uno

Incluso si nunca escribiste una etiqueta <link rel='icon'>, Chrome seguirá solicitando /favicon.ico desde la raíz de tu dominio. Este es un comportamiento heredado que se remonta a Internet Explorer, y todavía está en la especificación HTML. Si ese archivo no existe, obtienes un 404 y el globo predeterminado.

La solución es simple: coloca un favicon.ico real en la raíz de tu dominio, o agrega una etiqueta de enlace explícita en tu <head>:

<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

La especificación HTML define rel='icon' como la forma estándar de asociar un icono con una página. Chrome usará el primero válido que encuentre, pero proporcionar tanto un SVG como un ICO de respaldo es el patrón más seguro.

Causa raíz 2: la etiqueta link está en el lugar equivocado o tiene un error de sintaxis

Chrome solo lee las etiquetas de enlace de favicon dentro del <head>. Si tu etiqueta terminó en el <body> (común con parciales de plantillas o inyectores de CMS), Chrome la ignora silenciosamente. Sin error en consola, sin advertencia, solo un icono faltante.

Revisa estos errores comunes:

Si no estás seguro de si tu etiqueta es válida, mira el código fuente de la página en Chrome (Ctrl+U) y busca rel=. La etiqueta debería aparecer dentro del bloque head, antes de cualquier contenido del body.

Causa raíz 3: el archivo se sirve con el tipo MIME incorrecto o está corrupto

Chrome es estricto con los archivos de imagen. Si tu servidor devuelve tu archivo .ico como text/plain o application/octet-stream, Chrome puede negarse a renderizarlo. Puedes verificar esto en DevTools: haz clic en la solicitud del favicon en la pestaña Network y revisa los Response Headers.

Los tipos MIME correctos son:

En Apache, agrega AddType image/x-icon .ico a tu .htaccess. En Nginx, usa types { image/x-icon ico; } dentro de tu bloque server. Si estás en un host gestionado o CDN, revisa su documentación; algunos eliminan o anulan los tipos MIME por defecto.

Causa raíz 4: favicons SVG con marcado inválido

Los favicons SVG son cada vez más comunes porque escalan limpiamente y admiten modo oscuro. Pero el analizador SVG de Chrome es implacable. Un namespace faltante, una etiqueta sin cerrar o una entidad HTML perdida harán que se rechace todo el archivo, y Chrome recurrirá al globo predeterminado.

Valida tu SVG abriéndolo directamente en una pestaña del navegador. Si se renderiza como imagen, el marcado está bien. Si ves XML sin procesar o un error, corrige el SVG antes de preocuparte por la etiqueta del favicon. También confirma que el SVG tenga xmlns='http://www.w3.org/2000/svg' en el elemento raíz.

Prevención: construye un stack de favicons que Chrome no pueda ignorar

La configuración más confiable combina múltiples formatos para que Chrome siempre tenga un respaldo válido. Un stack mínimo y moderno se ve así:

Puedes generar todos estos desde una sola imagen fuente usando Mzu favicondl. Una vez desplegado, verifica que cada archivo cargue con un estado 200 en la pestaña Network.

Para un recorrido más profundo sobre el almacenamiento en caché específico de Chrome y las peculiaridades de localhost, consulta nuestra guía sobre favicon not showing in Chrome. Y si no estás seguro de si tu favicon siquiera se está sirviendo, realiza las comprobaciones de nuestra guía de auditoría de favicons.

Qué hacer si nada funciona

Si has borrado la caché, corregido la etiqueta link, confirmado el tipo MIME y Chrome sigue mostrando una pestaña en blanco, prueba estos últimos pasos:

  1. Prueba en una ventana de incógnito de Chrome (se omiten las extensiones y la caché del perfil).
  2. Prueba en otro navegador (Firefox o Edge) para confirmar que el archivo se sirve correctamente.
  3. Busca un service worker que intercepte la solicitud del favicon y devuelva una respuesta obsoleta.
  4. Busca un encabezado Content Security Policy que bloquee img-src para el dominio de tu icono.

Si el icono aparece en incógnito pero no en tu perfil normal, el problema es 100% caché local, no tu servidor. Si falla en todas partes, el problema está en tu HTML, la ruta del archivo o la configuración del servidor.

Que Chrome no muestre favicons para sitios web casi siempre es una de cuatro cosas: un favicon.ico raíz faltante, una etiqueta link mal colocada o malformada, un tipo MIME incorrecto o un 404 en caché. Resuélvelos en ese orden y tendrás tu icono de vuelta en la pestaña antes de que se enfríe tu café.