¿El favicon de Astro no se muestra? Aquí está la solución
Astro copia public/ a la salida sin tocarlo pero nunca inyecta etiquetas de icono por ti. Una pestaña en blanco significa que el enlace no está en el layout que usan tus páginas, o que una página renderizó su propio elemento html y se saltó el layout.
public/ conserva los nombres, pero nada lo enlaza por ti
Los archivos en public/ se copian a la raíz de la salida tal cual, así que /favicon.svg o /favicon.ico es una URL real. Pero Astro no escanea public/ ni inyecta etiquetas. Todo lo que quieras en el head tiene que escribirse en un componente de layout con el que tus páginas se envuelven.
El truco son las páginas que se saltan el layout. Un 404 personalizado o una landing page única que escribe su propio elemento html no tiene etiquetas de icono a menos que las añadas ahí también.
Encuentra el hueco
- 1
Abre /favicon.ico (o /favicon.svg) directamente
Un 404 significa que el archivo no está en public/. Si carga, el archivo está bien y el problema es la etiqueta link ausente.
- 2
Comprueba que el layout renderiza el enlace
Ver código fuente en una página normal. Si no hay etiqueta rel=icon, tu Layout.astro no la incluye. Añade las etiquetas link al head del layout.
- 3
Comprueba las páginas que se saltan el layout
Los 404 personalizados y las páginas independientes que escriben su propio html no heredan el head del layout. Añade ahí también las etiquetas de icono, o envuélvelas en el layout.
El favicon de Astro no se muestra: preguntas frecuentes
¿Por qué no se muestra mi favicon de Astro?
Astro no inyecta etiquetas de icono, así que o tu layout no renderiza el enlace o la página en cuestión se salta el layout. Confirma que el archivo carga en su URL, luego comprueba que el head del layout contiene realmente las etiquetas rel=icon.
¿Tengo que añadir las etiquetas a cada página?
Solo al layout con el que se envuelven tus páginas. El truco son las páginas que no lo hacen: un 404 personalizado o una landing page que escribe su propio elemento html necesita que le añadas las etiquetas directamente.
Mi sitio está bajo un subdirectorio y los iconos dan 404.
Ajusta base en astro.config.mjs, pero Astro no reescribe las rutas fijas de tu propio marcado. Antepón a los href import.meta.env.BASE_URL y revisa el HTML generado antes de desplegar.