DEV Community

Cover image for How to Change the Favicon in Gatsby
When Shit Breaks
When Shit Breaks

Posted on • Edited on • Originally published at whenshitbreaks.com

How to Change the Favicon in Gatsby

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
Enter fullscreen mode Exit fullscreen mode

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
  ];
}
Enter fullscreen mode Exit fullscreen mode

4. (Re)Run gatsby develop to see the favicon for your Gatsby app.

// shell
gatsby develop
Enter fullscreen mode Exit fullscreen mode

And that's it! Pretty simple shit, right?


Resources

Top comments (0)