How do i add favicon gatsby-config.js?

Question

so i try to add favicon in my blog the code following bellow: in my gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Chatbiz Blog',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-catch-links',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
        icon: `https://blablabla/favicon.ico`
      },
    },
    'gatsby-transformer-remark',
  ],
}

so the question is when i try to this code the favicon can't render in my blog how to solve the problem?

Answer 1

I believe, you are putting the icon params in wrong package options.

To solve this, first install the gatsby manifest plugin using the command below:

npm install --save gatsby-plugin-manifest

Then add this to your gatsby-config.js:

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `gatsby-starter-default`,
    short_name: `starter`,
    start_url: `/`,
    background_color: `#663399`,
    theme_color: `#663399`,
    display: `minimal-ui`,
    icon: `src/images/favicon.png`, // This path is relative to the root of the site.
  },

Remember to stop and start your development server in order to see your changes.