制作 PWA Maskable 图标并配置 Manifest

分别考虑两种用途

Maskable 图标安全圆，半径等于画布宽度的 40% — 安全圆半径为画布宽度的 40%，直径为 80%。斜线是可能被裁切区域的辅助标记，实际图标背景仍需铺满画布。

浏览器可以按原样显示常规图标，操作系统则可能对安装后的 PWA 图标施加遮罩。建议分别导出常规与 maskable 文件，以便独立检查构图。先打开 PWA 图标生成器。

关键内容应位于画布中心、半径为图像宽度 40% 的安全圆内，背景应铺满边缘。中央 80% 宽度的方形，其四角仍会超出安全圆，因此应检查圆形安全区域，而不是只比较矩形边界。

导出 PWA 预设

导入设计，调整留白并选择 PWA。检查 192 与 512 像素结果以及 maskable 版本，导出并解压 ZIP。预设提供图像，应用中的 manifest 需要你自行添加或更新。

将文件命名为 maskable-icon-512x512.png 并不意味着构图天然适合遮罩。请使用遮罩预览，确认文字、尖角等重要细节仍然可见。

引用正确的文件

标准与 maskable 图标文件名对应到 sizes 和 purpose 字段 — 每个 manifest 条目都应与实际文件尺寸及遮罩用途对应。

将图片复制到 public/icons，再根据项目调整 manifest 的 icons 数组：

{
  "icons": [
    { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icons/maskable-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/icons/maskable-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

以上片段只描述图标。保留现有 name、start_url、display 等应用字段，并根据部署方式调整路径。如果框架尚未自动配置，需要在页面引用 manifest：

<link rel="manifest" href="/manifest.webmanifest">

可参阅 MDN manifest icons 参考和 maskable 图标指南。

完成前的验证

直接打开 manifest 和图片地址，确认返回实际文件。在浏览器开发工具中检查 manifest 并预览遮罩，在测试设备安装 PWA，对比启动器图标。如果安装后仍显示旧图标，应先确认部署文件和缓存，再测试全新安装。

正确图标并不代表已满足所有 PWA 安装要求，还需检查应用 manifest、HTTPS 与浏览器的其他要求。

分别考虑两种用途

导出 PWA 预设

引用正确的文件

完成前的验证

相关流程