Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

How To Add Favicon to Gatsby-theme-blog Site

April 28, 2020 #Gatsbyjs, #gatsby-theme-blog

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

No Favicon

In development mode, we can see the gatsby favicon

With 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 here

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: `Anson LowZF Blog`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#66E0FF`,
display: `standalone`,
icon: `content/assets/anson-blog-logo.png`,
theme_color_in_head: false,
},
},
],
}

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

With Gatsby favicon


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me