Si alguna vez has creado un nuevo proyecto en Astro, lo has desplegado en Vercel o Netlify, y te has dado cuenta de que tu sitio en producción sigue mostrando con orgullo ese icono de cohete con degradado por defecto en la pestaña del navegador... no estás solo. Veo que esto ocurre constantemente cuando los desarrolladores migran desde Next.js o HTML puro. Configurar un favicon en Astro framework no es difícil, pero el pipeline de assets específico de Astro significa que no puedes simplemente lanzar un archivo .ico en cualquier lugar y esperar que funcione.

Astro maneja los archivos estáticos de forma diferente a los bundlers tradicionales. Si pones tu icono en la carpeta equivocada, Vite lo ignorará, codificará el nombre del archivo con un hash o lanzará un error 404 en producción. Vamos a solucionar eso ahora mismo.

El gran dilema: public/ vs src/assets/

El error más común que cometen los desarrolladores en Astro es colocar su favicon dentro del directorio src/assets/. El pipeline de assets de Astro es fantástico para optimizar imágenes de contenido, pero aplica un hash agresivo a los nombres de los archivos para el control de caché (por ejemplo, convirtiendo icon.svg en icon.a8b3c9.svg).

Los navegadores, lectores RSS y rastreadores web esperan que tu favicon tenga una URL estática y predecible, idealmente justo en la raíz de tu dominio. Para lograr esto, debes colocar tus archivos de favicon en el directorio public/.

Astro copia todo lo que hay dentro de la carpeta public/ directamente a tu salida de compilación (generalmente la carpeta dist/) sin tocar los nombres de los archivos. Esto garantiza que public/favicon.svg se convierta en tusitio.com/favicon.svg.

Paso 1: Prepara tu stack moderno de iconos

Estamos en 2026. Deja de generar 30 tamaños diferentes de iconos heredados para dispositivos que dejaron de existir hace una década. Solo necesitas tres archivos para una configuración perfecta.

Si solo tienes un PNG de alta resolución de tu logo, pásalo por Mzu favicondl para generar instantáneamente este stack exacto de tres archivos. (Para profundizar en por qué este stack específico es el ganador, echa un vistazo a nuestra guía sobre mejores prácticas para favicons).

Paso 2: Coloca los archivos en el directorio Public

Toma los tres archivos que acabas de generar y suéltalos directamente en la raíz de la carpeta public/ de tu proyecto Astro. La estructura de tu proyecto debería verse así:

├── public/
│   ├── favicon.svg
│   ├── favicon.ico
│   └── apple-touch-icon.png
├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
└── astro.config.mjs

No los anides en una carpeta public/images/. Mantenlos en la raíz. Esto asegura que las herramientas que solicitan ciegamente /favicon.ico sin leer tu HTML sigan encontrando lo que necesitan.

Paso 3: Actualiza tu componente BaseHead

La mayoría de las plantillas modernas de Astro usan un componente compartido para la sección <head>, típicamente llamado BaseHead.astro o manejado dentro de Layout.astro. Abre ese archivo.

Necesitas añadir las etiquetas HTML link correctas. Fíjate en la barra diagonal (slash) inicial en los atributos href; esto es crítico.

<!-- Dentro de src/components/BaseHead.astro -->
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width,initial-scale=1' />

<!-- Stack de Favicon -->
<link rel='icon' href='/favicon.ico' sizes='32x32' />
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<link rel='apple-touch-icon' href='/apple-touch-icon.png' />

<!-- Opcional: Web App Manifest -->
<link rel='manifest' href='/site.webmanifest' />

Mira cómo GitHub maneja los iconos de su navegador. Sirven un SVG nítido para navegadores modernos que cambia dinámicamente los colores según el tema de tu sistema, pero mantienen el enrutamiento extremadamente simple a nivel de la raíz. Al usar el directorio public/ de Astro y rutas absolutas, replicamos este pulido nivel GitHub sin esfuerzo.

Errores comunes en Astro

La barra diagonal inicial faltante

Si escribes href='favicon.svg' en lugar de href='/favicon.svg', tu icono se romperá en rutas anidadas. Por ejemplo, si un usuario visita tusitio.com/blog/mi-post/, el navegador buscará el icono en tusitio.com/blog/mi-post/favicon.svg y fallará. Usa siempre la ruta absoluta que comienza con una barra diagonal. Si sigues teniendo problemas, revisa nuestra guía de solución de problemas para favicons que no se muestran.

Problemas de configuración de Base Path

Si estás desplegando tu sitio Astro en un subdirectorio (como GitHub Pages) y has configurado la opción base en astro.config.mjs, las rutas absolutas estándar se romperán. Necesitas usar el helper base integrado de Astro.

Importa import.meta.env.BASE_URL en tu frontmatter y aplícalo a tus enlaces:

---
const baseUrl = import.meta.env.BASE_URL;
---
<link rel='icon' href=`${baseUrl}favicon.svg` type='image/svg+xml' />

Esto asegura que las rutas de tu favicon se ajusten dinámicamente, ya sea que estés ejecutando localmente en localhost o desplegado en una URL de producción anidada.

Configurar correctamente el favicon de tu Astro framework toma unos dos minutos una vez que entiendes las reglas de enrutamiento. Cíñete a la carpeta public/, usa rutas absolutas y deja que el navegador se encargue del resto.