图标和 manifest.json

Question

manifest.json中的图标处理方法有哪些建议？

我找到了这个webpack plugin that generates icons。它生成了 37 个图标和相应的 html 标签。

<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#fff">
<meta name="application-name" content="graff">
<link rel="apple-touch-icon" sizes="57x57" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="@dasnoo/graffity-inferno">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1536x2008.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-16x16.png">
<link rel="shortcut icon" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon.ico">

为了获得最佳效果，我应该将图标放在 manifest.json 和 html 元标记中吗？ 拥有 37 个图标会达到什么效果，而使用 10 个图标则无法实现（我认为它是更多的移动支持，但如果 3 个图标处理 95% 的浏览器，它实际上什么也没有实现）？有哪些推荐的？

这是给服务人员的。

Answer 1

您是对的，这些图标中的每一个都适用于不同的设备，并且通常是所述设备的不同版本。但是，您实际上并不需要 37。要获得 37，他们会为市场份额远低于 1% 的设备生成像素完美图标。您可以为他们提供最近的匹配项，几乎没有人会注意到。我倾向于将浏览器相关的图标放在 html 元标记中，并将应用相关的图标放在清单中。

关于这一切的好帖子在这里：https://realfavicongenerator.net/blog/new-favicon-package-less-is-more/

Answer 2

在基线上，您应该遵循以下清单的结构。更多详细信息可以在此link 上找到。虽然如果你对你的 PWA 运行 Lighthouse，它会要求另一个大小为 512 像素的图标。

{
    "name": "HackerWeb",
    "short_name": "HackerWeb",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#fff",
    "description": "A simply readable Hacker News app.",
    "icons": [
        {
            "src": "images/touch/homescreen48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "images/touch/homescreen72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "images/touch/homescreen96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "images/touch/homescreen144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "images/touch/homescreen168.png",
            "sizes": "168x168",
            "type": "image/png"
        },
        {
            "src": "images/touch/homescreen192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "related_applications": [
        {
            "platform": "web"
        },
        {
            "platform": "play",
            "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
        }
    ]
}