---
title: Gatsby Favicon Generator
description: Gatsby generates its icons from one source image declared in gatsby-config. How gatsby-plugin-manifest works, and what it does not cover for you.
canonical: https://favicontools.com/platforms/gatsby-favicon
---

# Gatsby Favicon Generator

Gatsby is the one stack here that generates the icon set for you. gatsby-plugin-manifest takes a single source image named in gatsby-config.js and produces the sizes, the web app manifest, and the link tags at build time.

## One source image, generated output

Point the plugin at a square PNG of 512x512 or larger and it does the resizing during the build, writes the icons into the output directory, generates the manifest, and injects the link tags into every page. You do not hand-place PNGs and you do not write the tags.

Watch the directory names. In Gatsby, public/ is build output — it is regenerated and should not be edited or committed. The folder you put files in by hand is static/, whose contents are copied into the output root. Every other framework on this site uses those names the other way round, which makes this the most common Gatsby mistake.

## gatsby-config.js

```js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "My Site",
        short_name: "MySite",
        start_url: "/",
        background_color: "#ffffff",
        theme_color: "#111111",
        display: "standalone",
        icon: "src/images/icon.png", // square, 512x512 or larger
      },
    },
  ],
};
```

## Where the files go

```
my-gatsby-site/
  src/
    images/
      icon.png  <- add  # the plugin's source image
    pages/
  static/  # copied to the site root as-is
    favicon.ico  <- add
  gatsby-config.js  # declares the icon path
  public/  # build output — do not edit
```

## What the plugin covers

| Output | Source | Notes |
| --- | --- | --- |
| PNG icon set | Resized from the icon option at build time | Written into the build output, not into your repo |
| Web app manifest | Built from the name, colour, and display options | Linked automatically |
| apple-touch-icon link | Added by the plugin's legacy support | On by default |
| favicon.ico | Not generated | Add your own in static/ if you want one |

> **Don't add a second set of tags:** Hand-writing icon links in the Head export or through a helmet component while the plugin is installed ships two competing sets, and which one wins is not something you control. Decide who owns the icons, then read the built HTML to confirm only one set is there.

## Gatsby favicon FAQ

### The build says my icon is too small.

The plugin refuses to upscale, so the source has to be at least as large as the biggest size it generates. A square 512x512 PNG is the practical floor; anything larger is fine and gets resized down.

### Where do the generated icons end up?

In the build output under public/, which is regenerated on every build. If you are looking for files to commit, there are none — the source image in src/ and the config entry are the only things that belong in git.

### Can I skip the plugin and place the files myself?

Yes. Put the icons in static/ and write the link tags in Gatsby's Head export. You lose the generated manifest and the automatic resizing, so it is only worth it if you need markup the plugin will not produce.