How to add a favicon in Gatsby

What you need

• One square source icon, 512x512px or larger (gatsby-plugin-manifest derives the rest).
• gatsby-plugin-manifest installed and configured in gatsby-config.js or gatsby-config.ts.
• Optionally favicon.ico in the static folder (copied to the root) for the classic .ico fallback.

Step-by-step: add a favicon in Gatsby

1. Generate a clean source icon. Use Logo2Favicon to produce a crisp square master icon (and a favicon.ico) in your browser - no upload - so the plugin has sharp pixels to downscale from.
2. Install and configure the plugin. Run npm install gatsby-plugin-manifest, then add it to the plugins array in gatsby-config.js with an icon option pointing at your source PNG.
3. Let the plugin generate icons. On gatsby build, the plugin emits the PWA icon sizes and the web manifest and injects a favicon link tag (a 32x32 PNG) into the document head automatically.
4. Add favicon.ico to static/ (optional). For the legacy /favicon.ico fallback, place favicon.ico in the static folder; Gatsby copies static/ to the public root verbatim.

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "My Site",
        short_name: "My Site",
        start_url: "/",
        icon: "src/images/icon.png",
      },
    },
  ],
};

Common mistakes to avoid

• Manually adding favicon link tags in html.js while gatsby-plugin-manifest also injects one, producing duplicate icon tags.
• Pointing the icon option at a small image; the plugin upscales it and every generated size looks blurry.
• Expecting favicon.ico from the plugin - it generates PNG icons; put an .ico in static/ if you need the legacy file.
• Listing gatsby-plugin-manifest before gatsby-plugin-offline incorrectly (manifest must come before offline so it gets cached).

Frequently asked questions

How do I add a favicon in Gatsby?

Configure gatsby-plugin-manifest in gatsby-config.js with an icon option pointing at one high-res source image. The plugin generates the PWA icons and manifest and injects a favicon link tag automatically on build.

Does gatsby-plugin-manifest create the favicon automatically?

Yes. In its default and hybrid modes it generates a 32x32 favicon PNG and injects a <link rel="icon"> tag in the head. You can opt out with include_favicon: false if you want to manage the tag yourself.

Where do I put favicon.ico in Gatsby?

In the static folder at your project root. Gatsby copies static/ to the public output verbatim, so static/favicon.ico is served at /favicon.ico - useful as a legacy fallback alongside the plugin's PNG icons.

Why is my Gatsby favicon blurry?

The icon source passed to gatsby-plugin-manifest is too small, so the generated sizes are upscaled. Provide a square 512x512px or larger master image so every derived icon stays sharp.

Favicon guides for other platforms

• Add a favicon in WordPress
• Add a favicon in Shopify
• Add a favicon in Wix
• Add a favicon in Squarespace

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.