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

10 2

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay