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

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

Gatsby-icon.png

my-icon.png

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

6. Change the gatsby-plugin-manifest configuration

my-icon.png

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

Closing

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

Tech237

Itguymax