Si alguna vez has lanzado un proyecto y te has dado cuenta de que la pestaña del navegador sigue mostrando ese logo morado genérico de Gatsby, no estás solo. Es la señal definitiva de un sitio sin terminar. Aunque Gatsby es increíble para el rendimiento, su estructura puede hacer que añadir un favicon for gatsby site parezca más difícil de lo que debería.

A todos nos ha pasado: pones un favicon.ico en la raíz, refrescas tres veces y... nada. Esto ocurre porque el proceso de compilación de Gatsby maneja los archivos de forma distinta a un sitio HTML estándar. Para obtener un resultado profesional como el de Stripe, necesitas una estrategia que genere múltiples resoluciones automáticamente.

La mejor forma: gatsby-plugin-manifest

En 2026, el estándar sigue siendo gatsby-plugin-manifest. ¿Por qué? Porque no solo añade un icono; genera todo un conjunto de tamaños para Android, iOS y escritorio. Además, crea el archivo manifest.webmanifest, vital para las PWAs. Puedes leer más sobre esto en nuestra guía sobre favicon site.webmanifest.

Paso 1: Instalar el plugin

Asegúrate de tenerlo en tu package.json. La mayoría de los starters de Gatsby ya lo incluyen.

npm install gatsby-plugin-manifest

Paso 2: Configurar gatsby-config.js

Debes apuntar el plugin a una imagen de alta resolución (mínimo 512x512 px). El plugin se encargará de redimensionarla durante el build.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Mi Sitio Gatsby',
        short_name: 'Gatsby',
        start_url: '/',
        background_color: '#ffffff',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/icon.png', // Ruta a tu icono fuente
      },
    },
  ],
}

Paso 3: Verificar la salida

Al ejecutar gatsby build, verás en la carpeta public varios archivos PNG. Esto asegura que tu icono se vea nítido en cualquier pantalla, desde un Mac Retina hasta un móvil Android antiguo. (Consejo: usa siempre un PNG cuadrado para evitar deformaciones).

El método manual: Carpeta Static

Si prefieres tener el control total y usar un archivo .ico optimizado a mano o un SVG, usa la carpeta static en la raíz de tu proyecto.

¿Por qué usar la carpeta static?

Cualquier cosa en /static se copia directamente a /public sin pasar por Webpack. Es ideal para archivos que no quieres que Gatsby procese.

Añadir la etiqueta Link

Usa la Gatsby Head API para inyectar la etiqueta en el head del HTML.

export const Head = () => (
  <>
    <link rel="icon" href="/favicon.ico">

)

Errores comunes

Tu favicon es la cara de tu sitio en las pestañas. Usar Mzu favicondl para preparar tu imagen fuente te ahorrará dolores de cabeza y dará a tu sitio Gatsby ese toque profesional que necesita.