Adding a favicon to gatsby site
— gatsbyjs — 1 min read
# Making a logo
To setup logo, you need right know of tools. You will have those tools, if you are professional designer, but if you are not, you will be looking for online applications, where you can design online itself. One such application, i have found is vectorpaint. This is my logo, i have designed it completely in vectorpaint
Next thing to do is convert it to favicon, for that i used favicon.io. Once you drag and drop the image, it will show you a small preview
Click download, you will be getting a zip file with multiple files like below,
# Setting up gatsby to display a favicon
Web app manifest is required to add favicon. Install gatsby-plugin-manifest, its not added by default in starter-blogs. Once installed verify it in
Stop the development server, if its running.
plugins:in gatsby-config.js to add the below,
Restart the development server by
Open the browser
http://localhost:8000/and open inspect console and check for errors. For me i had wrong size mentioned in
sizes:and updating and restarting it disappeared.
- You see the favion by now.