图标和 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 元标记中，将应用程序相关图标放在清单中。

很好 post 关于这里的所有内容：https://realfavicongenerator.net/blog/new-favicon-package-less-is-more/

Answer 2

作为基准，您应该遵循以下清单的结构。更多详细信息可以在这个 link. Though if you run Lighthouse 上找到，针对您的 PWA，它会要求另一个大小为 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"
        }
    ]
}

图标和 manifest.json

Icons and manifest.json

html

javascript

browser

service-worker

manifest.json