Actualizaste tu favicon, desplegaste los archivos nuevos y recargaste la página, pero el navegador sigue mostrando el icono incorrecto. Quizá es un logo viejo de hace seis meses, el icono de otro sitio o un placeholder genérico borroso que no debería estar ahí.
Esta es una de las frustraciones más comunes con favicons que enfrentan los desarrolladores. Los archivos existen en el servidor. Las etiquetas HTML parecen correctas. Y aun así, el navegador elige favicons equivocados e ignora lo que realmente desplegaste.
Aquí va primero la solución rápida, seguida de las razones reales por las que ocurre.
La solución rápida de 2 minutos
La mayoría de los síntomas de "favicon incorrecto" se reducen a una sola causa raíz: la precedencia del navegador. Cuando existen múltiples fuentes de iconos, los navegadores siguen un orden de búsqueda estricto, y cualquier conflicto secuestra el resultado.
Aplica esta checklist primero:
- Elimina cualquier
/favicon.icoen la raíz de tu sitio. Sobrescribe las declaraciones HTML en muchos navegadores. - Añade etiquetas explícitas
rel="icon"en tu<head>con los atributossizesytypecorrectos. - Añade un query string de cache-busting (por ejemplo,
?v=2) para forzar al navegador a obtener el archivo nuevo. - Recarga con
Ctrl+Shift+Ro sigue nuestra guía para limpiar la caché del favicon en casos tercos.
Si con eso se resuelve, listo. Si no, el navegador está eligiendo favicons incorrectos por un conflicto de precedencia, y empieza el diagnóstico a fondo.
Por qué los navegadores eligen el icono incorrecto
Los navegadores no confían ciegamente en tu HTML. Aplican una secuencia de búsqueda definida por la especificación de HTML, y cualquier desajuste puede secuestrar el resultado.
1. La trampa del /favicon.ico
Si vive un favicon.ico antiguo en la raíz de tu sitio y además envías etiquetas modernas <link rel="icon"> en tu HTML, los navegadores suelen preferir el archivo ico. Muchos navegadores solicitan automáticamente /favicon.ico cuando no se declara otro icono y tratan ese archivo como autoritativo una vez que existe.
La solución: borra el favicon.ico de la raíz, o sírvelo explícitamente con una etiqueta link y un atributo sizes preciso para que el navegador sepa qué es.
2. Atributo sizes ausente o incorrecto
El atributo sizes indica al navegador qué resolución contiene cada archivo de icono. Sin él, el navegador puede escalar un PNG de 16x16 para mostrarlo en un contexto de 32x32, dando ese aspecto pixelado que nadie quiere.
Decláralo siempre de forma explícita:
<link rel='icon' type='image/png' sizes='32x32' href='/icons/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='/icons/favicon-16x16.png'>La especificación de HTML define rel="icon" como la forma estándar de declarar los iconos del sitio. Consulta el WHATWG HTML Living Standard para las reglas exactas de parseo.
3. Conflictos en el atributo type
Si declaras type="image/svg+xml" pero el archivo servido es en realidad un PNG (o viceversa), los navegadores pueden saltarse ese archivo por completo y recurrir a cualquier otro disponible, incluida una versión vieja en caché.
Verifica que tus MIME types coincidan con la realidad. Un bug común: un CDN sirve image/png aun cuando la extensión del archivo y el atributo HTML dicen SVG.
4. Override del Web App Manifest
Cuando tu sitio tiene un site.webmanifest con su propio array icons, los navegadores pueden preferir los iconos del manifest por encima de tus link tags HTML, especialmente en móvil y en flujos de "Añadir a pantalla de inicio".
Revisa /site.webmanifest y asegúrate de que el array de icons apunte a los mismos archivos que declara tu HTML. Tamaños o formatos que no coincidan harán que el navegador elija favicons equivocados según la lógica específica de cada plataforma.
5. Retraso en la caché de CDN y edge
Cloudflare, Fastly y CDNs similares cachean de forma agresiva los assets estáticos. Incluso después de desplegar, los nodos edge pueden seguir sirviendo el favicon viejo durante horas o días.
Purga la caché de tu CDN para las rutas /favicon.ico, /icons/* y /site.webmanifest tras cada despliegue; si no, el navegador elige favicons incorrectos únicamente por edges desactualizados.
6. Trampas del Service Worker
Los service workers pueden cachear las respuestas del favicon de forma independiente a la caché HTTP del navegador. Si tu PWA cachea el icono en la primera instalación, los usuarios seguirán viendo la versión vieja hasta que el service worker se actualice.
Incrementa la versión de tu service worker y usa un query string de cache-busting en el valor de href. Un nombre de archivo versionado es aún más seguro.
Prevención: construye un stack de iconos a prueba de balas
Una vez resuelto el problema inmediato, refuerza tu setup para evitar futuros incidentes de "favicon incorrecto":
- Única fuente de verdad: genera todos los iconos desde un único archivo fuente siguiendo un flujo de trabajo adecuado con un favicon generator.
- Naming consistente: usa un directorio dedicado
/icons/, no la raíz del sitio. - Cache-busting en cada deploy: hashea los nombres de archivo en tu pipeline de build (por ejemplo,
favicon-abc123.png) para que las cachés viejas queden inaccesibles. - Audita con regularidad: haz una auditoría rápida entre navegadores antes de releases importantes.
- Prueba en incógnito: las ventanas de incógnito evitan la mayoría de capas de caché y te dan una vista honesta.
Conclusión
Cuando el navegador elige favicons incorrectos, casi nunca es algo aleatorio. Está siguiendo un orden de precedencia que no contemplaste, leyendo de una caché que olvidaste invalidar o interpretando un atributo type que no coincide con el archivo servido.
Elimina el favicon.ico de la raíz, declara link tags explícitos con sizes y types correctos, mantén tu manifest sincronizado y purga las cachés en cada deploy. Esa secuencia resuelve la mayoría de los casos de "favicon incorrecto", y los edge cases restantes suelen apuntar a una trampa de CDN o service worker que puedes depurar con DevTools en unos minutos.