PWA
PWA 图标：一个可安装应用需要什么
要让浏览器把你的网站当作一个可安装的 PWA，它的 manifest 必须至少列出一张 192x192 和一张 512x512 的 PNG 图标。强烈建议加一个 maskable 图标，好让 Android 把它塑成启动器的形状，而 iOS 仍需要一个单独的 apple-touch-icon，因为它在主屏幕图标上忽略 manifest。缺了 192/512 这一对，安装提示就不会出现。
安装的门槛
在 manifest 同时列出一张 192x192 和一张 512x512 图标之前，Chrome 和其他 Chromium 浏览器不会提议安装一个 PWA。这一对是硬性要求：没有它就没有安装提示，不论 manifest 里还有什么别的。
192 还服务于主屏幕快捷方式，512 供给启动画面和高密度显示。一个 maskable 版本让 Android 把图标裁剪成启动器所用的任意形状，而不是把它框进一个白色方框里。
一个 PWA 需要的图标
| 图标 | 为什么需要它 |
|---|---|
| 192x192 PNG | 安装要求与主屏幕快捷方式 |
| 512x512 PNG | 启动画面与高密度显示 |
| Maskable icon | 让 Android 把图标塑成启动器的形状 |
| apple-touch-icon 180x180 | iOS 主屏幕：manifest 覆盖不到它 |
PWA 图标常见问题
一个 PWA 需要哪些图标尺寸？
最起码在 manifest 里放一张 192x192 和一张 512x512 的 PNG，最好带一个 maskable 变体，再加一张给 iOS 主屏幕的 180x180 apple-touch-icon。
为什么我的 PWA 装不上？
最常见的原因是 manifest 缺了 192x192 或 512x512 图标：两者在浏览器显示安装提示之前都是必需的。先检查 manifest 的 icons 数组。
PWA 图标覆盖 iOS 主屏幕吗？
不覆盖。iOS 在主屏幕上忽略 manifest 的图标，改用 apple-touch-icon，所以那个文件你也得有。