我可以在 gatsby-plugin-manifest 中为 favicon 使用不同的图标吗

Question

我使用gatsby-plugin-manifestwithicon设置为一个图标，这对于 Android 和 iOS 设备来说非常好。但现在我想定义一个用于浏览器的附加图标（大小为 32x32 像素，文本较少）。但我也想保留其他图标。

那可能吗？如果是，怎么办？

Answer 1

Gatsby Plugin Manifest处理一系列适合您要求的选项：

// in gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
        icons: [
          {
            src: `/favicons/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/favicons/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ], // Add or remove icon sizes as desired
      },
    },
  ],
}

该icons插件处理混合自定义（我推荐），允许您仅添加所需的自定义图标，而无需为每种尺寸手动添加。从他们的文档中：

如果您想包含更多或更少的尺寸，那么混合选项适合您。与自动模式一样，您可以使用高分辨率图标来生成较小的图标。但与自动模式不同的是，您提供图标数组配置，并且图标是根据配置中定义的大小生成的。

混合选项提供了最大的灵活性，同时仍然不需要您手动创建所有图标尺寸。