Un favicon ausente o roto es una de las preguntas más comunes en Stack Overflow — y la respuesta casi siempre es una de estas diez cosas. Recorre esta lista de arriba abajo y lo encontrarás.
1. Caché del navegador (la causa número 1)
Los navegadores almacenan los favicons en caché de forma extremadamente agresiva — mucho más que las páginas normales. Incluso después de arreglar el problema, el icono antiguo (roto) puede persistir durante días. Prueba en este orden:
- Recarga forzada: Ctrl/Cmd + Shift + R
- Ventana de incógnito / privada — si aparece ahí, es solo tu caché
- Visita el archivo directamente: abre
https://yourdomain.com/favicon.ico. Si ves la imagen, el archivo está bien y es un problema de caché o del link. - Borra la caché de favicons: en Chrome, abrir
chrome://favicon/ya no funciona, así que usa una ventana de incógnito u otro navegador.
2. Ruta de archivo incorrecta
El href de tu <link> debe apuntar a donde el archivo está realmente. Una barra inicial (/favicon.ico) significa la raíz del sitio. Si tu sitio se sirve desde una subcarpeta, la ruta debe reflejarlo.
<!-- ❌ wrong if file is in /assets/ -->
<link rel="icon" href="favicon.ico">
<!-- ✅ absolute path from site root -->
<link rel="icon" href="/favicon.ico">
<!-- ✅ or the real location -->
<link rel="icon" href="/assets/favicon.ico">3. Falta la etiqueta <link>
Algunos navegadores recurren automáticamente a /favicon.ico, pero nunca deberías depender de eso. Declara siempre los iconos explícitamente en <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />4. Tipo MIME incorrecto
Si tu servidor sirve un .ico como image/png (o viceversa), algunos navegadores se negarán a renderizarlo. Un .ico debería ser image/x-icon o image/vnd.microsoft.icon; el PNG debería ser image/png.
5. Archivo no desplegado
Suena obvio, pero comprueba que el archivo realmente llegó a producción. Abre la URL del archivo en una pestaña nueva. Un 404 significa que no está ahí — recompila y vuelve a desplegar, y confirma que tu pipeline de compilación copia los favicons al directorio de salida.
6. Imagen de origen no cuadrada
Los favicons deben ser cuadrados. Si tu imagen de origen no es 1:1, los navegadores pueden mostrar un icono estirado o en blanco. Recorta primero. El generador de Favicon.one garantiza una salida cuadrada.
7. Problemas específicos de frameworks
Next.js App Router
Los archivos de iconos van en app/ (no en public/) para la detección automática. Consulta nuestra guía de favicon para Next.js.
Next.js Pages Router
Los archivos van en public/, las etiquetas van en pages/_document.tsx.
Webpack / Vite
Asegúrate de que favicon.ico esté en tu directorio public/ o static/ y referenciado en tu plantilla HTML.
8. HTTPS / contenido mixto
Si tu sitio es HTTPS pero el favicon se referencia por HTTP, los navegadores lo bloquearán como contenido mixto. Usa siempre URLs HTTPS o rutas relativas.
9. Un service worker almacena una versión antigua
Si tienes una PWA con service worker, puede estar sirviendo un HTML en caché que referencia un favicon antiguo. Actualiza y vuelve a registrar el service worker.
10. El favicon SVG no está soportado
Los favicons SVG no están soportados en todos los navegadores (en particular el Chrome antiguo de Android). Proporciona siempre un respaldo PNG/ICO junto al SVG.
¿Sigues atascado? Ejecuta el Favicon Checker
Pega tu URL en el Favicon Checker y te dirá exactamente qué iconos y etiquetas faltan o están rotos — sin adivinanzas.
¿Necesitas un paquete de favicon limpio para reemplazar uno roto? Genera uno gratis en Favicon.one.