无法在 gatsby 配置文件中添加网站图标答案

【问题标题】：Not able to add favicon in gatsby config file无法在 gatsby 配置文件中添加网站图标
【发布时间】：2020-03-06 05:39:36
【问题描述】：

即使在 gatsby 配置文件中将 favicon 添加到 gatsby hello world starter 项目后，它也无法正常工作。我尝试用谷歌搜索并在 stackoverflow 中搜索类似的问题，How do i add favicon gatsby-config.js?。但这无济于事，或者我可能在某个地方错了。

请指正！！

GATSBY CONFIG.JS

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: "xxxxxxx",
    author: "Subin",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    "gatsby-plugin-sass",
    // this plugin will pull all the files in our project system
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
        icon: `../src/images/favicon-32x32.png`,
      },
    },
    "gatsby-plugin-sharp",
    // REMARK plugin needed to extract the markdown files and parses
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-relative-images",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 750,
              linkImagesOriginal: false,
            },
          },
        ],
      },
    },
  ],
}

项目目录图片

Image : Tree hierarchy of my project structure

【问题讨论】：

标签： javascript reactjs create-react-app gatsby favicon

【解决方案1】：

要显示您的网站图标，您需要安装 gatsby-plugin-manifest，它不附带 hello world starter。

npm install --save gatsby-plugin-manifest

这里是您的gatsby-config.js，其中包含此插件的一些默认设置：

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: "xxxxxxx",
    author: "Subin"
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
      }
    },
    "gatsby-plugin-sass",
    // this plugin will pull all the files in our project system
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
        icon: `../src/images/favicon-32x32.png`
      }
    },
    "gatsby-plugin-sharp",
    // REMARK plugin needed to extract the markdown files and parses
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-relative-images",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 750,
              linkImagesOriginal: false
            }
          }
        ]
      }
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "xxx",
        short_name: "xxxx",
        start_url: "/",
        background_color: "#6b37bf",
        theme_color: "#6b37bf",
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: "standalone",
        icon: "src/images/favicon-32x32.png" // This path is relative to the root of the site.
      }
    }
  ]
};

请记住在修改gatsby-config.js 时停止您的开发服务器并启动一个全新的服务器以查看您的更改。

你可以试试这个，让我知道它是否按预期工作？

【讨论】：