Skip to content

Gatsby, how to change the favicon

New Course Coming Soon:

Get Really Good at Git

I created a site using Gatsby and I wanted to change the favicon.

I quickly looked at how to change it, and the process was very simple.

The favicon by default is the image static/favicon.ico. Just change that, and you’re set.

If you’re using the gatsby-plugin-sharp plugin, the favicon by default is the image src/images/gatsby-icon.png.

You don’t have to use that path, or the same format - the image can also be an SVG image, for example: open the gatsby-config.js file and change the plugins.gatsby-plugin-sharp.options.icon property from src/images/gatsby-icon.png to the one you want.

For example I put my new favicon image in src/images/logo-small.svg and I changed that configuration property to point to it.

I ran gatsby develop and I could immediately see Gatsby updated all the favicon images, in different sizes:

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!
→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code

Here is how can I help you: