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 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:
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025