Manifest 图标：Web App Manifest 中的 icons 数组
Manifest 图标是 web app manifest 里 icons 数组中的一个条目，manifest 是描述你网站被安装后形态的 JSON 文件。每个条目给出一个 src、一个 sizes 字符串、通常还有一个 type，以及可选的 purpose，浏览器会为主屏幕、应用启动器、任务切换器和启动画面各自挑选最贴近的匹配。最起码要声明一张 192x192 和一张 512x512 的 PNG。
这个数组是做什么用的
Web app manifest 是从你 head 中链接的一个 JSON 文件，它告诉浏览器当你的网站被安装后应当如何表现：它的名称、起始 URL、显示模式、主题色，以及它的图标。Manifest 图标是用在浏览器界面之外的那些：启动器、应用切换器、安装提示、启动画面。
与 favicon link 标签不同，这个数组是一份候选清单，而不是一组指令。你描述每个文件是什么，浏览器再按每个位置去选择。这意味着多声明条目的代价很低：在某个位置需要之前，什么都不会被下载。
一个最小的 manifest
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}用 <link rel="manifest" href="/manifest.json"> 从 head 链接它。文件也可以命名为 manifest.webmanifest；关键在于 link 标签。
图标条目上的字段
| 字段 | 作用 |
|---|---|
| src | 图像的路径，相对于 manifest URL 解析。必填。 |
| sizes | 以 "宽度x高度" 表示的尺寸，或用空格分隔多个以表示一个多尺寸文件。 |
| type | MIME 类型，例如 image/png。让浏览器可以跳过它无法解码的格式。 |
| purpose | "any"（默认）、可安全裁剪图标用的 "maskable"，或 "monochrome"。 |
Manifest 图标常见问题
为什么偏偏是 192 和 512？
192x192 是 Android 在常见屏幕密度下用于主屏幕图标的尺寸，512x512 是用于启动画面和安装提示的尺寸。两者合在一起就满足了 Chromium 浏览器的可安装性检查。
Manifest 图标会替代我的 favicon 吗？
不会。它们只覆盖已安装应用的那些位置。浏览器标签页、书签和历史记录仍来自你的 link rel="icon" 标签和 /favicon.ico，所以两者都要发布。
iOS 会读取 manifest 图标吗？
Safari 会读取 manifest 里像名称和显示模式这样的信息，但主屏幕图标来自 apple-touch-icon link。如果你想让图标在 iOS 和 Android 上都正确，就把两者都声明上。