¿El Favicon No Se Muestra? Soluciona Problemas Comunes (2025)
Soluciona problemas de favicon: no se muestra, icono incorrecto, borroso o en caché. Soluciones paso a paso para Chrome, Safari, Firefox y navegadores móviles.
Tu paquete de favicon está instalado, pero el icono no aparece—o muestra el incorrecto. No te preocupes, esto pasa todo el tiempo. El caché del navegador, rutas de archivo incorrectas y peculiaridades de plataforma pueden causar problemas de favicon.
Esta guía te lleva por los 5 problemas de favicon más comunes y te muestra exactamente cómo solucionarlos. La mayoría de los problemas toman menos de 5 minutos en resolverse una vez que sabes dónde buscar.
Problema 1: El favicon no aparece en absoluto
Primero, revisa tu HTML. Abre el código fuente de tu página (Ctrl+U o Cmd+Option+U) y busca "favicon" o "icon". Deberías ver etiquetas <link rel="icon"> en la sección <head>. Si faltan, el navegador no tiene nada que cargar.
Luego, abre DevTools (F12), ve a la pestaña Network y recarga la página (Ctrl+R o Cmd+R). Filtra por "favicon" o "icon". Si no ves ninguna petición, tus etiquetas link HTML no funcionan. Si ves errores 404, los archivos están en la carpeta incorrecta.
Solución común: Asegúrate de haber subido la carpeta /icons/ al directorio raíz de tu sitio web (la misma carpeta donde está index.html). Verifica que las rutas href en tu HTML coincidan con donde pusiste los archivos. Por ejemplo, si tus archivos están en /assets/icons/, tu HTML debería decir href="/assets/icons/favicon-32x32.png".
Problema 2: El favicon muestra el icono antiguo después de actualizar
Este es el problema #1 de favicon. Los navegadores cachean favicons agresivamente—a veces por semanas. Incluso después de subir archivos nuevos, los usuarios (y tú) podrían seguir viendo el icono antiguo.
Solución rápida: Añade un número de versión a los nombres de tus archivos favicon. Renombra favicon-32x32.png a favicon-32x32-v2.png, luego actualiza todas tus etiquetas <link> para que coincidan. Esto fuerza a los navegadores a descargar los archivos nuevos porque la URL cambió.
Alternativa: Añade una query string a tus archivos existentes. Cambia href="/icons/favicon-32x32.png" a href="/icons/favicon-32x32.png?v=2". Esto también funciona, pero algunos CDNs ignoran query strings, así que renombrar archivos es más confiable. Después de actualizar, prueba en una ventana de incógnito (Ctrl+Shift+N o Cmd+Shift+N) para ver el nuevo icono inmediatamente.
Problema 3: El favicon funciona en algunas páginas pero no en otras
Si tu página de inicio muestra el favicon correcto pero otras páginas no, probablemente tienes secciones <head> inconsistentes. Esto pasa mucho en sitios con múltiples plantillas o layouts.
Busca en tu código todas las etiquetas relacionadas con favicon. Busca <link rel="icon">, <link rel="apple-touch-icon"> y <meta name="msapplication">. Podrías encontrar snippets antiguos en header.php, _document.tsx o archivos de layout que sobrescriben tu nueva configuración.
Solución: Mueve todas las etiquetas de favicon a un solo layout compartido o componente de encabezado. Elimina cualquier código de favicon antiguo de plantillas de página individuales. Si usas WordPress, revisa tanto el header.php de tu tema como cualquier plugin de header/footer. Asegúrate de que cada página use la misma configuración de favicon.
Problema 4: El favicon funciona en escritorio pero no en móvil (o viceversa)
iOS Safari usa Apple Touch Icons (<link rel="apple-touch-icon">) para accesos directos de pantalla de inicio. Si tu icono se ve mal en iOS, verifica que tengas etiquetas apple-touch-icon en tu HTML y que los archivos PNG sean de al menos 180×180 píxeles. iOS ignora las etiquetas favicon regulares para pantallas de inicio.
Android Chrome usa iconos de tu manifiesto de aplicación web (manifest.json). Si tu icono no aparece cuando los usuarios "Añaden a pantalla de inicio" en Android, verifica que tu manifest.json tenga un array de icons con archivos PNG de 192×192 y 512×512. Asegúrate de que el manifiesto esté enlazado en tu HTML: <link rel="manifest" href="/manifest.json">.
Los tiles de Windows necesitan browserconfig.xml con configuraciones TileImage y TileColor. Si no apuntas a Windows, puedes omitir esto. Siempre prueba en dispositivos reales cuando sea posible—los emuladores no siempre coinciden con el comportamiento real del navegador.
¿Sigues atascado?
Si ninguna de estas soluciones funciona, verifica que tus archivos favicon sean archivos PNG o ICO válidos (no corruptos o JPEGs renombrados). Usa nuestro Convertidor de Imágenes para regenerar tu paquete de favicon desde cero—a veces empezar de nuevo resuelve problemas raros.