¿El favicon no aparece o no se actualiza? 9 causas y soluciones
Las nueve causas que rompen los favicons, y la solución exacta para cada una. Nueve de cada diez veces es la caché, así que empieza por ahí y baja por la tabla.
<link rel="icon" href="/favicon.ico?v=2" sizes="any">Cambiar la URL es lo que hace que el navegador busque un archivo nuevo. Editar el ICO en el mismo lugar no es suficiente.
Causas y soluciones
| Causa | Por qué falla | Solución |
|---|---|---|
| 1. Caché del navegador o del CDN | Los navegadores cachean los favicons más agresivamente que casi cualquier otro recurso, y un CDN por delante añade una segunda capa. | Fuerza un refresco (Cmd+Shift+R / Ctrl+F5) y añade una cadena de consulta de versión para que la propia URL cambie. |
| 2. Ruta de archivo equivocada | Una ruta relativa se resuelve contra la página actual, no contra la raíz. | Usa una barra inicial, /favicon.ico, y confirma que el archivo de verdad carga en esa URL en una pestaña nueva. |
| 3. Etiquetas link faltantes o mal formadas | Ningún link de ícono, un error de tipeo en rel="icon", o etiquetas colocadas fuera del <head> impiden que el navegador encuentre el archivo. | Valida el markup en tu layout compartido. |
| 4. Formato o tamaño equivocado | Un favicon demasiado pequeño, el MIME type equivocado o un .ico corrupto pueden fallar en renderizarse silenciosamente. | Reexporta en un tamaño y formato compatibles, y sírvelo con el content type correcto. Compara ICO vs PNG y revisa los tamaños de favicon necesarios. |
| 5. El apple touch icon no se actualiza | iOS ignora el favicon.ico y usa el apple-touch-icon. Si falta o está desactualizado, la pantalla de inicio muestra lo que no es. | Corrige el link del apple-touch-icon, luego elimina y vuelve a añadir la página a la pantalla de inicio. |
| 6. Problemas con el ícono del manifest | En Android y en PWAs instalados, el ícono viene del manifest.json. Una ruta mala o un tamaño equivocado ahí rompe los íconos de la pantalla de inicio y de la splash. | Corrige las rutas y tamaños de ícono en el manifest.json, luego reinstala la app. |
| 7. La salida del build elimina tus etiquetas | Algunos frameworks reescriben el head del documento, así que las etiquetas link escritas a mano no sobreviven al build. | Sigue la guía de tu stack: Next.js, React, WordPress o Shopify. |
| 8. Un tema o CMS inyecta su propio ícono | Un tema puede definir su propio ícono de sitio, que sobrescribe el que añadiste en el markup. | Define el ícono a través del ajuste de ícono de sitio de la propia plataforma, en lugar de en la plantilla. |
| 9. Una caché de build sirve un archivo desactualizado | La caché del build o de la plataforma sigue entregando el ícono viejo incluso después de que redespliegas. | Purga la caché del build/plataforma, redespliega y vuelve a comprobar. |
Dónde mirar a continuación
¿Sospechas del formato o el tamaño? Compara ICO vs PNG en el glosario y revisa los tamaños de favicon necesarios. ¿Problema en iOS? Lee la entrada sobre apple-touch-icon. ¿Problema en el manifest? Lee qué es manifest.json.
Las causas 7 a 9 son las específicas de plataforma: algunos frameworks y CMSs sobrescriben o cachean el favicon de formas que el HTML puro no. La salida del build puede eliminar tus etiquetas, un tema puede inyectar su propio ícono, o una caché de build puede servir un archivo desactualizado. Las guías de Next.js, React, WordPress y Shopify cubren, cada una, su propia versión de esto.
Cómo limpiar un favicon en caché
- 1
Añade una cadena de consulta de versión
Cambia el href del link a /favicon.ico?v=2 para que el navegador busque un archivo fresco.
- 2
Fuerza un refresco de la página
Usa Cmd+Shift+R (macOS) o Ctrl+F5 (Windows) para saltarte la caché.
- 3
Purga cualquier caché de CDN
Si hay un CDN por delante de tu sitio, invalida la ruta del favicon para que los nodos de borde sirvan el archivo nuevo.
¿Limpiaste la caché y sigue igual?
| Lo que ves | Lo que suele significar | El siguiente movimiento |
|---|---|---|
| 404: favicon no encontrado | El navegador pidió /favicon.ico y el servidor no tenía nada ahí. Común justo después de un build de framework que nunca copió el archivo a la salida. | Abre /favicon.ico directamente. Si da 404, el archivo no está en el despliegue. Esto es un problema de build o de ruta, no de caché, así que arreglar la caché nunca va a ayudar. |
| El ícono viejo todavía carga en la URL directa | Abrir /favicon.ico muestra la imagen VIEJA, así que el propio archivo está desactualizado. Ningún refresco forzado lo va a mover. | Un paso del build o un CDN está entregando un archivo viejo. Purga la caché de la plataforma/CDN, redespliega, y luego reabre la URL directa antes de revisar la pestaña. |
| Archivo correcto en la URL, ícono equivocado en la pestaña | La URL directa es correcta pero la pestaña sigue equivocada. Una segunda etiqueta link (de un tema, de un plugin o el valor predeterminado del framework) le está ganando a la tuya. | Ve el código fuente y cuenta las etiquetas rel="icon". El navegador toma la última que entiende, así que elimina la perdedora en lugar de añadir una tercera. |
| Bien en un navegador, ausente en otro | Cada navegador, y cada perfil de Chrome, mantiene su propio almacén de favicons, y algunos guardan una entrada desactualizada durante días. | Confirma en una ventana privada nueva o en un perfil limpio antes de decidir que el sitio tiene la culpa. |
Recorre esa tabla de arriba abajo. Cada fila descarta una capa, así que dejas de adivinar sobre la caché y empiezas a leer lo que el servidor de verdad devuelve.
Los tamaños que les importan a los casos con falla
Confirma la solución con un escaneo
Adivinar es lento. Ejecuta un escaneo automatizado que busca tu sitio en vivo, lista cada etiqueta de favicon que encuentra y señala las que faltan o están rotas, para que sepas que la solución de verdad aterrizó.
¿Quieres probar manualmente en navegadores y dispositivos también? Mira cómo probar y verificar tu favicon.
Preguntas frecuentes
¿Por qué no aparece mi favicon?
Las causas más comunes son el caché agresivo del navegador, una ruta de archivo equivocada o relativa, y etiquetas <link> faltantes o mal formadas en el <head>. Fuerza un refresco, confirma que /favicon.ico resuelve directamente y revisa tus etiquetas.
¿Cómo fuerzo a mi favicon a actualizarse?
Añade una cadena de consulta de versión a la URL del ícono, por ejemplo /favicon.ico?v=2. Esto hace que el navegador lo trate como un archivo nuevo. Luego fuerza un refresco o limpia la caché del sitio.
¿Por qué mi favicon aparece en el escritorio pero no en el iPhone?
iOS usa el apple-touch-icon, no el favicon.ico. Si falta ese link de PNG 180×180, iOS recurre a una captura de pantalla. Añade un link apple-touch-icon y vuelve a añadir la página a la pantalla de inicio.
¿Cuánto tarda un favicon en actualizarse en la búsqueda de Google?
Google actualiza los favicons cuando vuelve a rastrear tu sitio, lo que puede llevar de días a semanas. Asegúrate de que el ícono tenga al menos 48×48, esté referenciado con una etiqueta rel=icon válida y sea accesible para Googlebot.
¿Por qué dice favicon no encontrado, o devuelve un 404?
El navegador pidió el ícono por su ruta y el servidor no tenía nada ahí. Abre /favicon.ico directamente en una pestaña nueva: si da 404, el archivo nunca se desplegó en esa URL, normalmente un build de framework que no lo copió a la salida, o una ruta equivocada en la etiqueta link. Arregla dónde aterriza el archivo, no la caché.
Mi favicon falta: ¿dónde debería estar el archivo en realidad?
Para el clásico ícono de pestaña, un archivo real en la raíz del sitio para que /favicon.ico resuelva. Los frameworks cambian cómo llega ahí: Next.js lee app/favicon.ico, Vite y la mayoría de los SPAs copian public/ a la raíz, y WordPress o Shopify lo sirven a través de un ajuste de ícono de sitio en lugar de un archivo. Si la etiqueta apunta a un lugar donde el build nunca escribió un archivo, el ícono está 'faltando' aunque tu fuente parezca correcta.
Intenté limpiar la caché y sigue igual. ¿Ahora qué?
Deja de limpiar cachés y lee lo que el servidor devuelve. Abre /favicon.ico directamente: un 404 significa un problema de build o de ruta, una imagen vieja significa un archivo de build o CDN desactualizado, y el archivo correcto con el ícono equivocado en la pestaña significa que una segunda etiqueta link está ganando. Cada resultado apunta a una solución diferente. Mira la tabla de escalado de arriba.