Add a custom icon to your Gatsby site in just a few minutes

Mar 26 · 2 min read

To add a custom icon to your Gatsby site in just a few a minute, let follow the steps below

1. Start your gatsby site project

Go to the folder directory where you want your project to be saved on your disk and run

gatsby new thenyourprojectname

Note that you should have nodejs install and gastby-cli

2. change directory to your project directory

cd thenyourprojectname

3. Start development server

gatsby develop

4. Open your Gatsby site

To open your gatsby site go to your favorite browser and browse http://localhost:8000/.This how your site should look if you have done everything properly, notice that Gatsby uses their icon as default no worry let me show how to customize it to your like.

Gatsby default starter

5. Add Your icon to the images folder


As you can see above, I have added my own icon to the images folder

6. Change the gatsby-plugin-manifest configuration


As shown above, change the icon field value to be the path to your my-icon.png file

7. See the result

custom favicon
auto-generated custom favicon icons

Well, we have our custom favicon on our Gatsby site.

thanks to gatsby-plugin-manifest


I hope this helps you guys to have your custom favicon on your Gatsby site without struggling.




Written by


ReactJS, React-native and ecosystem and serverless app dev

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade