El favicon no se muestra: guía de solución de problemas
Subiste un favicon pero la pestaña aún muestra un globo terráqueo genérico o un logotipo antiguo. Esta guía analiza las causas más comunes (almacenamiento en caché, rutas incorrectas, archivos faltantes y etiquetas <link> en conflicto) en el orden en que debe verificarlas.
Los navegadores almacenan en caché los favicons de forma más agresiva que casi cualquier otro activo. Una recarga forzada (Ctrl+Shift+R o Cmd+Shift+R) corrige muchas falsas alarmas. Si eso falla, agregue una cadena de consulta de versión una vez: /favicon.ico?v=2.
Confirme que el archivo existe en la URL que solicita el navegador. Abra /favicon.ico directamente en una nueva pestaña. Un 404 significa que el archivo no está implementado donde cree que está, algo común en las compilaciones SPA que solo sirven para index.html.
Verifique sus rutas <link rel="icon"> href. Las rutas absolutas (/favicon.ico) funcionan en todas las páginas; Las rutas relativas (favicon.ico) se interrumpen en rutas anidadas como /blog/post.
Si utiliza una CDN, borre las rutas de favicon después de la implementación. Algunas CDN almacenan en caché las respuestas 404 para /favicon.ico cuando faltaba el archivo durante la primera solicitud.
Varias etiquetas <link rel="icon"> pueden confundir a los navegadores más antiguos. Coloque favicon.ico primero, luego las variantes PNG/SVG con atributos explícitos de tipo y tamaño.
WordPress, Shopify y los hosts estáticos inyectan cada uno sus propias etiquetas. Vea el código fuente de la página y busque rel="icon"; las etiquetas duplicadas o anuladas son una causa frecuente.
Las advertencias de contenido mixto HTTPS bloquean las URL de favicon HTTP en páginas seguras. Sirve todos los íconos a través de HTTPS.
Para el desarrollo local, algunos navegadores se niegan a actualizar los favicons hasta que borre los datos del sitio para localhost.
Cómo funciona
- 1
Verificar la URL del archivo
Abra /favicon.ico en una pestaña nueva; espere 200, no 404.
- 2
Inspeccionar etiquetas <head>
Ver fuente; Confirme un enlace canónico favicon.ico y sin errores tipográficos.
- 3
Romper el caché una vez
Agregue ?v=2 al href, implemente, actualice por completo y luego elimine la consulta si lo desea.
Pruébalo ahora
Prueba tu favicon en vivo
Probador de favicon en vivoPreguntas frecuentes
¿Por qué mi favicon funciona localmente pero no en producción?+
Las compilaciones de producción a menudo se envían a un subdirectorio o prefijo CDN. Verifique que la ruta implementada coincida con su <link> href y que el archivo esté incluido en el resultado de la compilación.
¿Cuánto tiempo pasará hasta que Google actualice mi favicon en los resultados de búsqueda?+
Google puede tardar días o semanas después de volver a rastrear. Asegúrese de que el ícono tenga al menos 48 × 48, sea cuadrado y sea accesible públicamente en una URL estable.
¿El modo Adblock o de privacidad oculta los favicons?+
Rara vez para íconos propios. Los servidores proxy de favicon de terceros se pueden bloquear; Los iconos autohospedados de su dominio no se ven afectados.
¿Debo eliminar el caché de favicon del navegador?+
Borre los datos del sitio para su dominio en la configuración del navegador o pruebe en una ventana privada con el caché deshabilitado.