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
3. Start development server
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.
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
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.