Gatsby 我可以在盖茨比插件清单中为favicon使用不同的图标吗

我正在使用

gatsby插件清单

，将

图标

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

可能吗？如果是，如何处理满足您需求的一系列选项：

// 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

下，插件处理一个混合定制（我推荐），允许您仅添加所需的自定义图标，而无需手动添加每个尺寸的图标。根据他们的文件：

如果希望包含更多或更少的尺寸，则可以使用混合选项 为你。与自动模式一样，您可以从中包含一个高分辨率图标 它可以生成更小的图标。但与自动模式不同，您 提供图标阵列配置，并根据 配置中定义的大小

混合动力选项允许最大的灵活性，但仍然没有 要求您手动创建所有图标大小

---

可以使用

gatsby插件清单

定义图标集。在那里，理论上可以为不同的大小添加不同的图标。但是，这不是一个合适的解决方案，因为没有明确的方法来区分favicons和应用程序清单图标（例如，当页面保存到主屏幕时，移动设备上显示的内容）

我个人解决了这个问题，只对应用程序图标使用了

gatsby插件清单

，并使用

react头盔

：

gatsby config.js:

{
解析：`gatsby插件清单`，
选项：{
名称：`My app`，
短名称：`My app`，
起始url:`/`，
背景颜色：`FFFFFF`，
主题颜色：“000000”，
显示：`standalone`，
图标：`src/images/icon.png`，
include\u favicon:false，//排除favicon
},
},
`盖茨比`，

Seo.jsx组件：

从“./images/favicon-16x16.png”导入favicon 16x16；
从“./images/favicon-32x32.png”导入favicon 32x32；
从“./images/favicon-64x64.png”导入favicon 64x64；
常数faviconLinks=[
{rel:“icon”，键入：“image/png”，大小：“16x16”，href:favicon16x16}，
{rel:“icon”，键入：“image/png”，大小：“32x32”，href:favicon32x32}，
{rel:“快捷方式图标”，键入：“图像/png”，href:favicon64x64}，
];
导出默认值（）=>(
我的应用程序
);