Ya lanzaste tu primer sitio con Astro, lo desplegaste y te diste cuenta de que la pestaña del navegador sigue mostrando el logo por defecto de Astro. La solución está en un lugar muy concreto: la configuración del favicon en la carpeta public de Astro.

A diferencia de Next.js o Nuxt, Astro trata la carpeta public de forma particular. Los archivos que coloques dentro se saltan el pipeline de build de Vite y se copian tal cual al directorio final de salida. Justo lo que necesitas para los assets del favicon, pero eso también implica entender cómo funciona antes de empezar a añadir archivos a ciegas.

Cómo funciona el favicon en la carpeta public de Astro

Según la documentación de estructura de proyectos de Astro, la carpeta public está pensada para archivos que no necesitan pasar por el proceso de build. Los assets del favicon encajan en esta categoría porque no quieres que Vite les aplique hash, los transforme o los optimice: lo que quieres es que se sirvan en URLs predecibles para que los navegadores puedan encontrarlos.

Cualquier cosa que sueltes en /public queda disponible en la raíz de tu sitio desplegado. Si metes favicon.svg en public/, vivirá en https://yoursite.com/favicon.svg. Sin imports, sin resolución del bundler, sin complicaciones.

Requisitos previos

Paso 1: genera tus archivos de favicon

Antes de tocar la carpeta public, prepara los assets. Para la mayoría de proyectos necesitas cuatro archivos:

Puedes generar el paquete completo con un solo clic usando Mzu favicondl, que produce todos los tamaños que necesitas sin redimensionar manualmente.

Paso 2: coloca los archivos en la carpeta public

Abre la raíz de tu proyecto y localiza el directorio public/. Copia ahí dentro tus archivos de favicon ya preparados. La estructura de carpetas debería verse así:

your-astro-project/
├── public/
│   ├── favicon.svg
│   ├── favicon-32x32.png
│   ├── apple-touch-icon.png
│   └── favicon.ico
├── src/
└── astro.config.mjs

Mantén los nombres en minúsculas y con guiones. A los navegadores les da igual la capitalización, pero tu servidor de despliegue podría servir archivos distintos según el sistema operativo: apégate a una sola convención.

Paso 3: añade los link tags en tu layout

Los archivos en public/ no aparecen en tu HTML de forma automática. Tienes que referenciarlos con tags <link>. Abre tu componente de layout principal (suele ser src/layouts/Layout.astro) y añade este bloque dentro del <head>:

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon-32x32.png' sizes='32x32' type='image/png'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>
<link rel='shortcut icon' href='/favicon.ico'>

Este patrón sigue la especificación de HTML para rel='icon': los navegadores modernos prefieren el SVG, los navegadores antiguos hacen fallback al PNG, y el ICO cubre cualquier caso que se haya quedado en el pasado.

Paso 4: gestiona el dark mode (opcional)

Los favicons claros pueden desaparecer sobre el chrome oscuro del navegador. Añade un segundo SVG con los colores invertidos y una media query que los intercambie:

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>

Coloca ambos SVG en public/. El atributo media le indica al navegador cuál cargar según el tema del sistema del usuario, sin necesidad de JavaScript.

Paso 5: verifica el build de salida

Antes de desplegar, ejecuta tu build de producción y revisa la salida. El contenido de la carpeta public debería aparecer tal cual en dist/:

npm run build
ls dist/

Deberías ver favicon.svg, favicon-32x32.png y los demás en la raíz de dist/. Si no aparecen, comprueba que no los hayas metido por error en un subdirectorio tipo public/assets/: eso los ubicaría en /assets/favicon.svg en vez de en la raíz.

Errores habituales

Colocar los favicons en src/assets/. Los archivos que van ahí los procesa Vite, les aplica hash y los agrupa en el bundle; pierdes las URLs predecibles. Usa siempre public/ para los archivos de favicon.

Olvidar limpiar la caché del navegador. Después de desplegar, haz una recarga forzada (Ctrl+Shift+R) o prueba en una ventana de incógnito. Los navegadores cachean los favicons de forma agresiva, a menudo durante días. Si necesitas forzar la actualización en los navegadores de los usuarios, revisa nuestra guía sobre mejores prácticas de cache busting para favicons.

Olvidarse del atributo sizes. Sin él, los navegadores asumen 16x16 y pueden escalar tu icono hacia arriba, dejándolo borroso. Declara siempre las dimensiones reales.

Usar extensiones en mayúsculas. Favicon.PNG funciona en macOS, pero rompe en servidores Linux con sistema de archivos case-sensitive. Apégate a minúsculas: favicon.png.

Para terminar

La configuración del favicon en la carpeta public de Astro ya está lista. El directorio public te da URLs estables y predecibles sin pelearte con la herramienta de build, justo lo que necesita un favicon. Suelta tus archivos, conecta los link tags, verifica la salida y tus pestañas se verán profesionales en cualquier navegador.

Si quieres una visión más amplia sobre estrategias de favicon en static site generators (Next.js, Gatsby, Hugo), revisa nuestra guía de favicon para static site generators. Y si tu icono no aparece después del despliegue, la solución suele ser más sencilla de lo que parece.