How To Add Favicon to Gatsby-theme-blog Site

Checking the site in production, gatsby-theme-blog does not come with any setup for favicon.

In development mode, we can see the gatsby favicon

How could we add a favicon into our production site?

Gatsby-plugin-manifest

After digging gatsby.js docs and some googling, found out this gatsby plugin work best favicon.

npm i gatsby-plugin-manifest

In case you want to know more about this plugin, visit the plugin

After finish installation, I add the following code to gatsby-config.js.

module.exports = {
  plugins: [
    ...otherPlugin,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `AnsonwLowZF Blog`,
        short_name: `AnsonBlog`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#66E0FF`,
        display: `standalone`,
        icon: `./static/anson-blog-logo.png`,
        theme_color_in_head: false,
      },
    },
  ],
}

It’s that simple to add a favicon to our site in production,