How to change favicon of gatsby website?

Harsh Vats on September 01, 2020

Changing favicons of gatsby website is pretty easy and requires only two steps:

  1. Remove the default favicon of gatsby.
  2. Add your favicon.

Where to find the default favicon of gatsby?

Look into the gatsby-config.js file in the root directory. There you can find this code :


{
  resolve: 'gatsby-plugin-manifest',
  options: {
    name: 'Harsh Vats',
    short_name: 'Harsh Vats',
    start_url: '/',
    background_color: '#663399',
    theme_color: '#663399',
    display: 'minimal-ui',
    icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
  },
}

Now you just have to change the icon src by your image path.

.ico files might not work sometimes, so prefer .png or .jpg only.

After changing path, it should look like:

icon: 'src/images/new-icon.png'

That's it and now you are good to go with your favicon in gatsby.

Connect with me on LinkedIn
© 2021, Built by Harsh Vats