โ† flaviocopes.com

Gatsby, how to change the favicon

Published May 02 2020

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 src/images/gatsby-icon.png.

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.

I ran gatsby develop and I could immediately see Gatsby updated all the favicon images, in different sizes:



Wanna go from noobie to expert?

I wrote an entire book on this topic ๐Ÿ‘‡

I also got a super cool course ๐Ÿ‘‡

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits