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

Question

我正在使用 gatsby-plugin-manifest与 icon设置为一个非常适合 Android 和 iOS 设备的图标。但是现在我想定义一个用于浏览器的附加图标(大小为 32x32 像素和更少的文本)。但我也想保留其他图标。

那可能吗？如果是，如何？

Answer 1

可以定义 manual图标集使用 gatsby-plugin-manifest .在那里，理论上您可以为不同的尺寸添加不同的图标。然而，这不是一个合适的解决方案，因为没有明确的方法来区分网站图标和应用程序 list 图标(例如，当页面保存到主屏幕时，移动设备上显示的内容)。
我个人通过使用 gatsby-plugin-manifest 解决了这个问题仅用于应用程序图标并使用 react-helmet 配置网站图标:
gatsby-config.js:

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `My app`,
    short_name: `My app`,
    start_url: `/`,
    background_color: `#FFFFFF`,
    theme_color: `#000000`,
    display: `standalone`,
    icon: `src/images/icon.png`,
    include_favicon: false, // exclude favicons
  },
},
`gatsby-plugin-react-helmet`,

Seo.jsx 组件:

import favicon16x16 from "../images/favicon-16x16.png";
import favicon32x32 from "../images/favicon-32x32.png";
import favicon64x64 from "../images/favicon-64x64.png";

const faviconLinks = [
  { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16x16 },
  { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32x32 },
  { rel: "shortcut icon", type: "image/png", href: favicon64x64 },
];

export default () => (
  <Helmet link={faviconLinks}>
    <title>My app</title>
  </Helmet>
);