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.

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
custom favicon
Image for post
Image for post
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

Written by

ReactJS, React-native and ecosystem and serverless app dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store