PWA Maskable 图标生成器
在启动器裁切 PWA 图标之前，先把安全区调准确。
将图稿放到不透明、铺满画布的背景上，检查保证可见的 80% 直径中心圆，再导出专用的 192×192 与 512×512 Maskable PNG。所有裁切形状只用于预览，下载文件仍是完整方形。
上传 Logo 或图标图稿
建议使用居中的 Logo 或符号。透明源图很适合编辑，所选颜色会成为最终不透明、铺满边缘的背景。
PNG · JPG · WEBP · SVG / 最大 20 MB / 建议 512 PX
真正重要的几何规则
Maskable 图标安全区：直径 80% 的中心圆
Web App Manifest 规范把保证可见区定义为位于图标中心、半径等于较短边 40% 的圆。无论用户代理使用什么遮罩，圆内像素都必须保留；圆外像素则可能被裁掉。
四边 10% 描述的是安全圆最外侧到画布边缘的距离，但不代表中间 80% 方形的每个角都安全。请用圆形叠层直接检查真实图稿。
- 较短边对应半径
- 40%
- 保证可见圆直径
- 80%
- 安全圆到画布边缘
- 10%
如何为 PWA 制作 Maskable 图标
只需三个聚焦步骤，即可为常规 PWA 图标补上一套专用 Maskable 资源。
- 01
上传源 Logo 或图标
选择 PNG、JPG、WebP 或 SVG 图稿。浏览器会在本地读取，图像不会发送给 LogoFoundry。
- 02
调整缩放、留白与安全区
调整缩放、留白和不透明背景，并逐一检查圆形、方圆形、圆角方形、方形与水滴形预览。
- 03
导出 PNG 并更新 Web App Manifest
下载两张 PNG，把生成的 icons 数组合并进你现有的 manifest.webmanifest 文件。
Maskable 图标、完整 PWA 图标包与 Android 自适应图标的区别
这些格式解决的是相邻问题，但打包结构和运行方式并不相同。
| 范围 | 本生成器 | 完整 PWA 生成器 | Android 原生自适应图标 |
|---|---|---|---|
| 主要输出 | 2 张不透明 Maskable PNG | 图标、Manifest、Favicon、启动屏、Service Worker | 前景层、背景层和可选单色层 |
| 配置方式 | Manifest icons 片段 | 完整 Manifest 与安装文件 | Android XML 资源 |
| 裁切行为 | 由浏览器或系统应用遮罩 | 同时包含 Maskable 与普通 any 图标 | Android 启动器合成多个图层 |
| 最适合 | 调整现有图稿的安全区 | 构建完整可安装 PWA 资源 | 发布原生 Android 应用 |
还需要普通 any 图标、Favicon、完整 Manifest、iOS 启动屏和安装文件？请使用完整的 PWA 图标生成器。
刻意保持精简的图标包
下载 192×192 与 512×512 Maskable PNG 图标
ZIP 只包含当前任务真正需要的文件，JSON 路径与文件结构完全一致。
192×192 Maskable PNG 图标
icons/maskable-icon-192x192.pngPWA 安装流程中常用的较小尺寸图标，使用你选择的不透明背景渲染。
512×512 Maskable PNG 图标
icons/maskable-icon-512x512.pngChromium 系 PWA 安装流程中常用的高分辨率 Maskable 图标。
Web App Manifest JSON 配置片段
manifest-snippet.json包含匹配 src、sizes、type 与 purpose 的 icons 数组，请合并到你自己的 Manifest。
{
"icons": [
{
"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"
}
]
}请另外保留 purpose 为 "any" 的普通图标。本工具只把生成文件标记为 "maskable"，避免带安全留白的图标被复用到所有普通图标场景。
Maskable 图标常见问题
关于安全区、不透明背景、Manifest 接入和设备检查的实用解答。
什么是 Maskable 图标？
Maskable（可遮罩）图标是一种 Web App Manifest 图像，允许浏览器或操作系统把它裁切成平台偏好的形状。它使用 Manifest 中的 maskable purpose，并把关键图稿留在标准化的中心安全区内。
80% Maskable 安全区到底指什么？
它是位于图标中心、直径等于图标较短边 80% 的圆，也就是 40% 半径。圆内像素保证可见。它不是 80% 的方形，因此同样宽度的方形四角仍可能超出安全圆。
设置 10% 留白就一定安全吗？
不一定。10% 只是画布边缘到 80% 直径圆最外侧的距离；较宽或方形图稿仍可能在角部越过圆。导出前请直接检查虚线圆和所有预览形状。
Maskable 图标可以使用透明背景吗？
规范允许用户代理把透明像素合成到它自行选择的纯色上，并建议避免透明。因此本生成器会把源图放在你选择的不透明全出血背景上，让结果更可预测。
导出前需要自己做圆角吗？
不需要。应当导出背景铺满的完整方形图像，让浏览器或操作系统自行应用圆形、方圆形、圆角方形或其他遮罩。本工具中的形状只用于预览，绝不会写入 PNG。
为什么生成 192×192 和 512×512 两种尺寸？
这是 Chromium 系 PWA 安装指导中广泛使用的一小一大尺寸组合，适合作为浏览器安装资源；它们并不是 W3C Maskable 图标规范强制规定的尺寸。
同一张图可以使用 purpose "any maskable" 吗？
Manifest 在语法上允许多个 purpose，但专用文件通常更清楚。Maskable 图标带有安全留白，在普通场景中可能显得过小，因此本工具只输出 purpose maskable，普通 any 图标应保留在完整 PWA 图标集中。
它和 Android 原生自适应图标一样吗？
不一样。Web Maskable 图标是由 Web App Manifest 引用的一张方形图；Android 原生自适应图标由独立的前景层、背景层和可选单色层组成，并通过 Android 资源配置。
如何在 Chrome 中检查导出的图标？
把文件和代码加入 PWA 后，打开 Chrome DevTools，进入 Application → Manifest → Icons。Chrome 可以只显示最小安全区，帮助你在本页预览之外继续检查真实 Manifest 结果。
我的图片会上传到服务器吗？
不会。读取、预览、缩放、PNG 编码和 ZIP 打包都在你的浏览器本地运行，LogoFoundry 不会收到或存储你选择的图稿。
Maskable 图标规范与官方文档
本页的安全区几何与 Manifest 行为均按照当前规范和平台文档编写。