¿Favicon no aparece? 7 causas comunes y soluciones

Has añadido un favicon a tu sitio web, pero no aparece en la pestaña del navegador. ¿Frustrante? Repasemos las 7 razones más comunes y sus soluciones, ordenadas de la más a la menos probable.

1. Caché del navegador (más común)

Los favicons se almacenan en caché de forma más agresiva que casi cualquier otra cosa en el navegador. Incluso después de actualizar el archivo, el navegador puede mostrar el antiguo (o ningún icono) durante horas o días.

Solución:

• Actualización forzada: Ctrl+Shift+R (Windows/Linux) o Cmd+Shift+R (Mac)
• Abrir en modo Incógnito/Privado
• Borrar caché del navegador: Configuración → Privacidad → Borrar datos de navegación → Imágenes y archivos en caché
• Añadir una cadena de consulta para evitar la caché: href="/favicon.ico?v=2"

2. Ruta de archivo incorrecta

El error de codificación más común. El navegador no puede encontrar tu archivo favicon porque la ruta es incorrecta.

Solución:

• Usa rutas absolutas que empiecen con /: href="/favicon.ico"
• Abre https://yoursite.com/favicon.ico directamente en el navegador — ¿puedes ver el icono?
• Verifica si hay errores tipográficos en el nombre del archivo (por ejemplo, favicon.ico vs Favicon.ico — en servidores Linux, las mayúsculas y minúsculas importan)

3. Etiquetas HTML faltantes o incorrectas

La etiqueta <link> podría faltar, estar mal formada o colocada fuera del <head>.

Solución: Asegúrate de que este código esté dentro de tus etiquetas <head>:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Errores comunes:

• Usar rel="shortcut icon" — aunque todavía es compatible, rel="icon" es el estándar
• Falta el atributo type — añade type="image/x-icon" o type="image/png"
• Colocar la etiqueta link en <body> en lugar de <head>

4. Archivo corrupto o inválido

El archivo podría parecer correcto en tu computadora, pero estar corrupto o en el formato incorrecto.

Solución:

• Verifica que el archivo sea un ICO/PNG válido — ábrelo en un visor de imágenes
• No te limites a renombrar un JPEG a .ico — eso no convierte el formato
• Regenera usando una herramienta adecuada como Image to Favicon de Mzu favicondl

5. El servidor no sirve el tipo MIME correcto

Algunos servidores no reconocen los archivos .ico y los sirven con la cabecera Content-Type incorrecta.

Solución: Revisa las cabeceras de respuesta en DevTools (pestaña Red). El tipo MIME debería ser:

• .ico → image/x-icon o image/vnd.microsoft.icon
• .png → image/png
• .svg → image/svg+xml

Para Apache, añade a .htaccess:

AddType image/x-icon .ico

Para Nginx:

location ~* \.ico$ {
    add_header Content-Type image/x-icon;
}

6. Problemas de HTTPS / Contenido mixto

Si tu sitio está en HTTPS pero la URL del favicon usa HTTP, el navegador lo bloqueará silenciosamente.

Solución:

• Usa rutas relativas al protocolo: href="/favicon.ico" (sin http:// ni https://)
• O usa HTTPS explícitamente: href="https://yoursite.com/favicon.ico"

7. Favicon no aparece en los resultados de búsqueda de Google

Tu favicon aparece en la pestaña del navegador pero no en los resultados de búsqueda de Google. Este es un problema aparte.

Requisitos de favicon de Google:

• La URL del favicon debe ser rastreable (no bloqueada por robots.txt)
• El tamaño debe ser un múltiplo de 48px (por ejemplo, 48×48, 96×96, 144×144)
• Debe ser una imagen cuadrada
• Google no mostrará favicons que considere inapropiados o de baja calidad
• Google puede tardar de días a semanas en recoger un nuevo favicon

Solución: Usa la herramienta de inspección de URL de Google Search Console para solicitar un nuevo rastreo de tu página de inicio.

Lista de verificación rápida para depuración

1. Abre https://yoursite.com/favicon.ico — ¿carga?
2. Abre DevTools → pestaña Red → recarga → filtra por "favicon" — ¿hay errores 404?
3. Revisa el código fuente HTML — ¿la etiqueta <link> es correcta y está dentro de <head>?
4. Prueba el modo Incógnito — ¿se muestra allí?
5. Verifica en otro navegador — ¿es un problema específico del navegador?