Cómo solucionar el molesto error 404 favicon.ico Not Found

May 31, 2026 · 5 min read

Abres la consola del navegador en una página HTML nueva y lo ves de inmediato: Failed to load resource: the server responded with a status of 404 (Not Found) — favicon.ico. No hiciste referencia a ningún favicon. No lo solicitaste. Sin embargo, ahí está, llenando tus registros cada vez que cargas la página.

A continuación, te explicamos qué está ocurriendo realmente y cómo solucionarlo de forma correcta.

Puntos clave

Los navegadores, rastreadores y herramientas de monitoreo solicitan automáticamente /favicon.ico desde la raíz del sitio, incluso sin una referencia HTML explícita.
El error 404 es inofensivo, pero contamina los registros del servidor y oculta problemas reales.
La solución más confiable es colocar un archivo favicon.ico real en la raíz del sitio.
Las configuraciones modernas también deben declarar variantes en formato SVG, PNG e Apple Touch Icon mediante <link rel="icon"> en el <head> del HTML.
Frameworks como Next.js gestionan la ubicación del favicon mediante convenciones de archivos, pero el requisito de la solicitud a nivel raíz sigue siendo el mismo.

Por qué los navegadores solicitan favicon.ico sin que se lo indiques

Los navegadores no esperan a que tu HTML les indique dónde está el favicon. Según el estándar HTML de WHATWG, cuando una página no tiene una etiqueta <link rel="icon"> explícita, los navegadores envían automáticamente una solicitud GET a /favicon.ico en la raíz del sitio. Esto se conoce como descubrimiento implícito de favicon — un comportamiento integrado en el navegador, no un error en tu código.

Y no solo ocurre con los navegadores. Los lectores de RSS, las vistas previas de enlaces en Slack, los rastreadores de motores de búsqueda y las herramientas de monitoreo de disponibilidad realizan la misma solicitud automática. Por eso, aunque tu navegador respete una etiqueta <link rel="icon">, otros clientes pueden seguir accediendo directamente a /favicon.ico.

El error es inofensivo, pero genera ruido. No romperá tu sitio, pero contamina los registros del servidor, enturbia los paneles de monitoreo y dificulta la detección de errores reales.

La solución correcta: servir un favicon.ico real en la raíz del sitio

La solución más confiable es colocar un archivo favicon.ico real en la raíz del sitio, de modo que la solicitud automática devuelva un 200 en lugar de un 404.

Puedes generar uno en favicon.io o en realfavicongenerator.net. Coloca el archivo aquí:

/favicon.ico   ← los navegadores y rastreadores solicitan esto automáticamente

Esto funciona independientemente de las demás declaraciones de favicon que tengas en tu HTML.

Configuración moderna de favicon: la declaración HTML completa

Una vez que tienes cubierta la raíz con tu favicon.ico, agrega declaraciones explícitas en el <head> para los navegadores modernos. La documentación de MDN sobre rel=“icon” recomienda usar rel="icon" en lugar del obsoleto rel="shortcut icon".

<!-- El archivo /favicon.ico en la raíz del sitio se sirve automáticamente — no se requiere etiqueta HTML -->

<!-- Favicon PNG -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">

<!-- Favicon SVG para navegadores que lo soportan -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon para marcadores en la pantalla de inicio de iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest para PWAs instalables -->
<link rel="manifest" href="/manifest.webmanifest">

Algunos aspectos importantes a tener en cuenta:

Los favicons SVG escalan perfectamente a cualquier tamaño y admiten el modo oscuro mediante prefers-color-scheme de CSS dentro del propio SVG.
El Apple Touch Icon está destinado específicamente a iOS cuando un usuario guarda tu sitio en su pantalla de inicio. Es independiente de tu favicon y suele ser un PNG de 180x180 píxeles.
Los iconos del Web App Manifest tienen un propósito diferente: definen los iconos para las PWAs instaladas. No reemplazan tu favicon ni evitarán el error 404 de /favicon.ico.

¿Qué ocurre con los frameworks?

Las herramientas específicas de cada framework gestionan parte de esto de forma automática. Por ejemplo, el App Router de Next.js trata un archivo favicon.ico ubicado en el directorio app/ como una convención de archivo especial y genera los metadatos correctos de forma automática. Otros frameworks tienen convenciones similares. Consulta la documentación de tu framework. Independientemente de cómo esté configurado el favicon, sigue siendo recomendable asegurarse de que las solicitudes a /favicon.ico estén gestionadas correctamente, ya que los navegadores, rastreadores y otros clientes pueden acceder directamente a esa ruta.

Diagnóstico rápido: revisa el DevTools de tu navegador

Abre la pestaña Network en DevTools, recarga la página y filtra por favicon. Si ves un 404 para favicon.ico, el archivo en la raíz está ausente o no se está sirviendo correctamente. Una respuesta 200 indica que todo está en orden.

Conclusión

Coloca un favicon.ico real en la raíz de tu sitio — ese único archivo detiene el 404 automático generado por navegadores, rastreadores y herramientas de monitoreo. Luego, agrega declaraciones explícitas con <link rel="icon"> para tu favicon SVG, el fallback en PNG y el Apple Touch Icon, a fin de ofrecer a los navegadores modernos el formato más adecuado. Registros limpios, iconos correctos, sin soluciones improvisadas.

Preguntas frecuentes

Puedes filtrarlo de tu consola, pero la solicitud subyacente sigue llegando a tu servidor y aparece en los registros, análisis y herramientas de monitoreo. Servir un archivo favicon.ico real es una solución única que resuelve el problema desde la raíz, en lugar de ocultarlo. Además, requiere mucho menos esfuerzo que configurar filtros en múltiples herramientas.

Sí. Muchos clientes, incluidos rastreadores más antiguos, lectores de RSS y bots de vista previa de enlaces, ignoran las etiquetas link del HTML y solicitan /favicon.ico directamente desde la raíz del sitio. Sin un archivo en esa ubicación, esas solicitudes devuelven 404. Servir tanto un favicon.ico en la raíz como declaraciones link modernas garantiza compatibilidad con todos los clientes.

Un archivo ICO multirresolución que contenga versiones de 16x16, 32x32 y 48x48 píxeles cubre prácticamente todos los casos de uso. La mayoría de los generadores de favicons lo producen automáticamente. Si solo necesitas un tamaño, 32x32 es la opción más segura por defecto, ya que funciona bien en pestañas del navegador y barras de marcadores en todas las plataformas principales.

Los navegadores almacenan en caché los favicons de forma agresiva, a veces durante días. Prueba con una recarga forzada, borra la caché del navegador o realiza la prueba en una ventana de incógnito. Verifica también que el archivo se esté sirviendo realmente desde la raíz del sitio y que devuelva una respuesta exitosa. Si se carga correctamente desde allí, el error 404 debería desaparecer una vez que expire la caché.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.