图标和manifest.json

Question

关于如何处理manifest.json中的图标，有什么建议？

我找到了这个webpack插件，生成图标。它生成了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

在基线时，您应该遵循下面清单的结构。在这个链接上可以找到更多的细节。虽然如果您对PWA运行灯塔，它会要求另一个大小为512 at的图标。

{
    "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"
        }
    ]
}