Gatsby, how to change the favicon
I created a site using Gatsby and I wanted to change the favicon.
I quickly looked at how to change it, and the process was very simple.
The favicon by default is the image
static/favicon.ico. Just change that, and you’re set.
If you’re using the
gatsby-plugin-sharp plugin, the favicon by default is the image
You don’t have to use that path, or the same format - the image can also be an SVG image, for example: open the
gatsby-config.js file and change the
plugins.gatsby-plugin-sharp.options.icon property from
src/images/gatsby-icon.png to the one you want.
For example I put my new favicon image in
src/images/logo-small.svg and I changed that configuration property to point to it.
gatsby develop and I could immediately see Gatsby updated all the favicon images, in different sizes:
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X