¿Dónde va favicon.ico? La convención de la ruta raíz
Por convención de larga tradición, los navegadores y muchos rastreadores solicitan /favicon.ico desde la raíz de tu dominio aunque no haya ninguna etiqueta link apuntando a él. Así que un favicon.ico servido en la raíz del sitio es el único archivo que satisface a todo lo que pregunta por ruta. Dónde lo colocas físicamente varía según el stack (public/ para la mayoría de los frameworks, el directorio de la app para Next.js), pero tiene que acabar respondiendo en /favicon.ico.
La solicitud a la raíz que nadie declara
Aunque tu head no tenga ningún enlace de icono, los navegadores, lectores de feeds y rastreadores seguirán pidiendo /favicon.ico en la mismísima raíz del dominio. Es una solicitud implícita anterior a la etiqueta link, y muchos clientes dependen de ella.
Por eso el archivo tiene que resolverse en la ruta raíz. Tus etiquetas link cubren todo lo demás (SVG, tamaños PNG, apple-touch-icon), pero esta URL se solicita apuntes o no a ella.
Dónde va el archivo según el stack
| Stack | Coloca el archivo en |
|---|---|
| HTML plano | La raíz del sitio, servido en /favicon.ico |
| Vite / React / Vue | public/, copiado a la raíz |
| Next.js App Router | el directorio de la app (app/favicon.ico) |
| WordPress | el ajuste Icono del sitio, no un archivo que subes |
| Angular | public/, o listado en los assets de angular.json |
Preguntas frecuentes sobre la ruta del favicon
¿Dónde pongo favicon.ico?
En algún sitio que lo sirva en /favicon.ico: la raíz del sitio para HTML plano, public/ para la mayoría de los frameworks, el directorio de la app para Next.js App Router. WordPress y Shopify lo gestionan a través de un ajuste en vez de un archivo.
¿El favicon tiene que estar de verdad en la raíz?
Para la solicitud implícita, sí. Los clientes que piden /favicon.ico por ruta no lo encontrarán en ningún otro sitio. Los iconos adicionales pueden vivir en otro lugar siempre que tus etiquetas link apunten a ellos.
¿Sigo necesitando favicon.ico si tengo etiquetas link?
Sí. Las etiquetas link sirven a los navegadores, pero las solicitudes por ruta de rastreadores y clientes antiguos eluden tu HTML y van directas a /favicon.ico.