PHOTO CREDIT: Figure: Favicon, Author: Seobility - License: CC BY-SA 4.0
In this tutorial, if you don't know what a favicon is, it's briefly described, and then I go step by step on how you can change the favicon in your Gatsby project to something else, instead of the default Gatsby icon.
What is a Favicon?
Here is a great explanation of what a favicon is from the MDN web docs:
A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file format.
On our blog, you'll see that the favicon is a piece of a shit💩
How to Change the Favicon
Steps
1. Install the plugin gatsby-plugin-manifest if it's not installed already.
// shell
npm install gatsby-plugin-manifest
If you had set up Gatsby with any of the starter packs, e.g. gatsby-starter-default, gatsby-starter-blog, then this plugin is most likely already installed. Otherwise, if you initialized your Gatsby project with the command npm init gatsby, selecting the option to generate a manifest file will have installed this plugin. You can check if the plugin is installed via package.json.
2. Add your favicon to the assets / images folder.
By default, this is the src/images folder (at least in Gatsby v4.3.0), and this is where you'll find the default Gatsby icon (src/images/icon.png). This may differ depending on your project setup and preferences.
3. Configure the plugin in your gatsby-config.js file.
Change the file path for options.icon to where your favicon is from Step 2.
// gatsby-config.js
module.exports = {
// ...siteMetaData
plugins: [
{
resolve: 'gatsby-plugin-manifest',
options: {
"icon": "src/images/icon.png"
}
},
// ...other plugins
];
}
4. (Re)Run gatsby develop to see the favicon for your Gatsby app.
// shell
gatsby develop
And that's it! Pretty simple shit, right?
Top comments (0)