¿Por qué no se ve mi favicon?

Guía para cuando el favicon no aparece o se muestra mal. Causas habituales y cómo resolverlo en distintos navegadores y plataformas.

Por qué suele no verse el favicon

Si el favicon no se ve, hay varias causas habituales. Entender por qué no se muestra te ayuda a localizar y corregir el problema con rapidez. Estas son las más frecuentes:

Ruta de archivo incorrecta: La causa más habitual es una ruta mal puesta en la etiqueta link de HTML
Caché del navegador: Los navegadores cachean el favicon con agresividad, así que puede no actualizarse al momento aunque ya hayas corregido el fallo
Faltan etiquetas link en el HTML: Sin las etiquetas link adecuadas en el head, el favicon no se mostrará
Formato o tamaño incorrectos: Un formato no admitido o unas dimensiones inadecuadas pueden impedir que se vea
Configuración del servidor: Tipos MIME o ajustes del servidor incorrectos pueden bloquear las peticiones del favicon
Desajuste HTTPS/HTTP: El contenido mixto puede impedir que el favicon se cargue

Cómo hacer que se vea el favicon

1. Comprueba las etiquetas link del HTML

Lo primero es asegurarte de que el head del documento tiene las etiquetas link correctas. Si faltan o están mal, el favicon no se mostrará.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Las rutas del atributo href deben coincidir con la ubicación real de los archivos. Si no se ve, revisa que las rutas sean correctas respecto al directorio raíz.

2. Vacía la caché del navegador

Los navegadores cachean el favicon con agresividad, por eso a veces no se actualiza aunque el código ya esté bien. Para descartar la caché:

Haz una recarga forzada (Ctrl+Shift+R en Windows/Linux, Cmd+Shift+R en Mac)
Borra la caché y las cookies de tu sitio
Prueba en una ventana de incógnito o privada
Espera 24-48 horas a que caduque la caché por sí sola

Si después de estos pasos sigue sin verse, es poco probable que el problema sea la caché.

3. Revisa rutas y ubicación de los archivos

Comprueba que los archivos existen en el sitio correcto. Si faltan o están en otra carpeta, no se mostrarán.

Ubicaciones habituales:

Directorio raíz: /favicon.ico or /favicon.png
Carpeta public: /public/favicon.ico (en generadores de sitios estáticos)
Carpeta assets: /assets/favicon.ico

Si no se ve, las rutas del HTML deben coincidir con la ubicación real de los archivos en el servidor.

4. Comprueba formato y tamaño

Puede no verse si usas un formato no admitido o un tamaño incorrecto. Para corregirlo:

Formato ICO: Formato clásico, funciona en todos los navegadores (16x16 o 32x32 píxeles)
Formato PNG: Los navegadores modernos admiten favicons PNG (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
Formato SVG: Lo admiten los navegadores modernos; es escalable e independiente de la resolución

Asegúrate de que los archivos tienen el formato y el tamaño adecuados. Si no se ve, empieza por un ICO o PNG estándar.

5. Revisa la configuración del servidor

Una mala configuración del servidor puede impedir que se vea. Para comprobarlo:

Verifica que los tipos MIME de .ico, .png y .svg están bien configurados
Comprueba que el servidor permite peticiones a los archivos de favicon
Asegúrate de que ninguna regla de redirección las bloquea
Mantén coherencia HTTPS/HTTP (sin avisos de contenido mixto)

Si el problema viene del servidor, habla con tu proveedor de hosting o revisa los archivos de configuración.

6. Prueba en varios navegadores

A veces se ve en un navegador y no en otro. Para acotar el fallo:

Prueba en Chrome, Firefox, Safari y Edge
Revisa los navegadores móviles (Safari en iOS, Chrome Mobile)
Comprueba que aparece en marcadores e historial
Prueba en escritorio y en móvil

Si falla solo en algunos navegadores, mira requisitos o incidencias conocidas de ese navegador.

Lista de comprobación rápida

Usa esta lista para localizar por qué no se ve el favicon:

Hay etiquetas link en el head
Las rutas del HTML coinciden con la ubicación real de los archivos
Los archivos existen y son accesibles
El formato está admitido (ICO, PNG o SVG)
Se ha vaciado la caché o se ha probado en modo incógnito
No hay errores de carga del favicon en la consola
Los tipos MIME del servidor están bien configurados

Usar un generador para resolver el problema

Si el favicon no se ve y no tienes claro formatos y tamaños, un generador profesional suele ahorrar tiempo. Herramientas como logo87.com generan todos los tamaños y formatos necesarios para que se muestre bien en cualquier navegador y dispositivo.

Un buen generador debería darte:

Todos los tamaños habituales (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
Varios formatos (ICO, PNG, SVG)
Apple touch icon para dispositivos iOS
Etiquetas link de HTML listas para copiar

Así se evitan causas habituales: formato incorrecto, tamaño equivocado o archivos que faltan.

Conclusión

Cuando el favicon no se ve, lo habitual es una ruta mal puesta, la caché, etiquetas HTML que faltan o un problema de formato. Con los pasos anteriores puedes localizarlo y corregirlo con rapidez.

Recuerda que los navegadores cachean el favicon con agresividad: aunque el código ya esté bien, puede no actualizarse al momento. Vacía la caché o prueba en una ventana de incógnito. Si sigue sin verse, revisa el servidor o consulta a tu proveedor de hosting.

Un generador profesional te deja los archivos y formatos correctos, y reduce mucho la probabilidad de que no se muestre. Suele ser la forma más sencilla de dejarlo funcionando en todos los navegadores y dispositivos.