如何添加 favicon gatsby-config.js？

Question

所以我尝试在我的博客中添加网站图标，代码如下： 在我的 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',
  ],
}

所以问题是当我尝试使用此代码时，网站图标无法在我的博客中呈现 如何解决问题？

Answer 1

我相信，您将图标参数放入了错误的包选项中。

要解决这个问题，首先使用以下命令安装 gatsby manifest 插件：

npm install --save gatsby-plugin-manifest

然后将其添加到您的 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.
  },

请记住停止并启动您的开发服务器以查看您的更改。