Maskable 图标：安全区与 purpose 字段
Maskable 图标是一种绘制为填满整个方形的 PWA 图标，好让平台把它裁剪成它使用的任意形状（圆形、圆角方形、圆角矩形）而不会切掉任何重要内容。你把 logo 保持在大约内侧 80% 的安全区内——一个直径为图标宽度 80% 的居中圆——并让背景延伸到四条边缘之外。你在 web app manifest 中用 "purpose": "maskable" 声明它。
它解决的问题
Android 启动器会对每个应用图标应用一个形状遮罩，好让主屏幕看起来整齐一致，而这个形状因设备、因启动器而异：一个是圆形，另一个是圆角方形，第三个是圆角矩形。把一张普通的 Web 图标交给这套系统，会被缩进一个白色圆角框里，甚至更糟——直接从 logo 上裁穿。
Maskable 图标就是为那次裁剪而绘制的。图形延伸到每一条边缘，而有意义的内容坐落在很内侧，这样上述任何一种遮罩都落在背景上而非落在标志上。它和 Android 的自适应图标是同一个思路，只是表达为一张图像加一条声明。
声明一个
"icons": [
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]两者都发布。默认 purpose 的图标用在平台不裁剪的地方；maskable 的那个用在平台裁剪的地方。
各图标尺寸对应的安全区
| 图标尺寸 | 安全区直径（80%） | 每边留白 |
|---|---|---|
| 192x192 | 154px | 19px |
| 384x384 | 307px | 38px |
| 512x512 | 410px | 51px |
Maskable 图标常见问题
我能不能直接给现有图标加内边距？
这已经是大部分工作，但那圈内边距必须是填充的背景，而不是透明。透明的留白让启动器没有可裁剪进去的东西，你最终会得到一个白色磁贴上的小 logo。
我怎么检查安全区对不对？
叠加一个位于图标宽度 80% 的居中圆，确认你在意的东西都没有越过它，然后在一台 Android 设备上安装这个 PWA 并查看启动器。Chromium 的 DevTools 也能在 Application 面板下预览 manifest 图标。
iOS 会使用 maskable 图标吗？
不会。iOS 从 apple-touch-icon link 取主屏幕图标，并应用它自己固定的圆角遮罩，所以 maskable 这个 purpose 在那里没有任何作用。