Skip to content

Anson LowZF Blog

How To Add Favicon to Gatsby-theme-blog Site

January 24, 2021

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?


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: [
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,

With Gatsby favicon

A Self Taught Developer Documenting My Learning To Code
Reactjs, Nextjs, Gatsbyjs & MaterialUI