PWA 图标生成器:标准与 Maskable 图标

导出包含 192 与 512 像素的标准、maskable PWA 图标,并在 Web App Manifest 中配置文件引用。

免费编辑与导出,无水印。AI 生成和 AI 编辑使用积分;完整编辑器适合桌面浏览器。

同一原图,调整构图后导出

用于演示的原始图标
原图
增加渐变背景与留白后的图标
编辑结果
32 像素导出预览
32 × 32 PNG

示例由仓库演示素材通过图标渲染器生成。具体平台的留白、遮罩和输出以所选预设为准。

操作步骤

  1. 导入设计,为前景设置足够留白。
  2. 选择 PWA,检查标准与 maskable 输出。
  3. 将文件写入 manifest,测试安装后的 PWA 图标。

标准与 maskable 使用独立 manifest 条目

PWA 预设导出 icon 与 maskable-icon 文件。常规图标的 purpose 设为 any,适用于遮罩的文件设为 maskable。尺寸和 MIME 类型声明必须与实际文件一致,manifest 由你在应用中配置。

文件名不能保证遮罩安全

将关键设计放在画布中心、半径为画布宽度 40% 的安全圆内,并让背景铺满边缘。请使用遮罩预览工具检查 maskable 输出;给裁切过紧的 Logo 标注 maskable 仍可能导致主体被裁掉。

当前预设的输出尺寸与文件

以下列表直接读取应用预设。项目配套文件由导出器追加;尺寸选择会影响实际导出内容。容器文件从下载的 ZIP 中提取。

查看 11 个图像输出
文件尺寸
icon-48x48.png48 × 48
icon-72x72.png72 × 72
icon-96x96.png96 × 96
icon-128x128.png128 × 128
icon-144x144.png144 × 144
icon-152x152.png152 × 152
icon-192x192.png192 × 192
icon-384x384.png384 × 384
icon-512x512.png512 × 512
maskable-icon-192x192.png192 × 192
maskable-icon-512x512.png512 × 512

常见问题

需要付费或登录吗?

普通图片编辑与导出可免费使用。AI 请求需要登录并使用积分;云同步等服务依据账户方案提供。

工具会自动修改我的项目吗?

不会。先在编辑器预览并下载资源,然后按项目要求手动接入。请保留现有图标备份并测试构建结果。