免费 PWA 图标生成器
完整的 PWA 资源工具箱
图标 · Favicon · iOS 启动屏 · Manifest —— 全部在你的浏览器中生成，绝不上传。
将 Logo 拖到这里
PNG · SVG · WEBP · JPG · 推荐 ≥ 512×512
为什么选择这款 PWA 图标生成器
现代 PWA 所需的一切 —— 集成在一个保护隐私、完全运行于浏览器的工具中。
隐私优先设计
零上传。你的 Logo 完全在浏览器中用 Canvas 处理 —— 任何数据都不会离开你的设备。
覆盖每一台 Apple 设备
自动生成 30+ iOS 启动屏，覆盖 iPhone SE 到 iPhone 17 Pro Max 以及全系 iPad。
6 种可遮罩形状
在 Pixel、三星、小米、OPPO、vivo、华为、一加、Nothing 等启动器形状下实时预览 —— 全球覆盖。
适配暗色模式
自动生成暗色启动屏与图标变体，并在 manifest 中附上正确的媒体查询注解。
复制即用的 HTML
所有 HTML head meta 标签、manifest 链接与启动屏标记，复制后即可粘贴进你的项目。
完整 Manifest
id、scope、screenshots、shortcuts、categories 一应俱全 —— 满足 Chrome 可安装条件并触发富安装弹窗。
本工具 vs 上传式 PWA 图标生成器
多数生成器要求你上传 Logo，且只覆盖部分环节。下面是本工具的对比。
| 能力 | 本工具 | 上传型 favicon 工具 | PWA 平台型工具 |
|---|---|---|---|
| 100% 浏览器端（零上传） | |||
| iOS 启动屏（30+ 设备） | |||
| 可遮罩实时预览（6 形状） | |||
| 暗色模式启动屏 + 图标 | |||
| Favicon 套件（.ico / .svg / Safari） | |||
| 富 Manifest（id、screenshots、shortcuts） | |||
| 一键复制 HTML 片段 | |||
| 完整中英文界面 | |||
| 免费、免注册 |
✓ 支持 · ~ 部分 / 付费 · ✗ 不支持
竞品能力按类型归类，反映的是该类工具的典型情况；具体产品各有差异，且会随时间变化。
刚接触 PWA 图标？阅读完整指南： PWA 图标要求与安全区
4 步生成你的 PWA 图标
上传一张 Logo，不到一分钟就能拿到整套可直接安装的资源。
1. 上传你的 Logo
拖入一张方形 PNG、SVG 或 WebP，建议 512×512 起步，成品更清晰。SVG 会按矢量逐尺寸渲染，放多大都不糊；而且全程在本地处理，不会上传到任何服务器。
2. 设置名称、颜色与平台
编辑应用名称、短名称、主题色与背景色，再按需开关 Android 可遮罩图标、Apple touch 图标、iOS 启动屏和 favicon 套件。
3. 预览形状与设备
在六种真实的 Android 启动器形状下核对可遮罩图标，再逐台设备预览每一张 iOS 启动屏，确认无误后再导出。
4. 下载资源包
一个 ZIP 打包全部图标尺寸、favicon 套件、iOS 启动屏、可通过校验的 manifest.json、service worker 以及可一键复制的 HTML 代码片段。
PWA 图标尺寸与格式详解
渐进式 Web 应用到底需要哪些图标尺寸，以及每种尺寸的用途。
现代 PWA 要同时照顾 Android、iOS 和桌面浏览器三端，而每一端要求的图标尺寸和格式都不一样。下面这张表把本工具生成的每一种资源、以及它们各自在浏览器里的用途都列了出来。
| 资源 | 尺寸 | 用途 |
|---|---|---|
| PWA 图标（any） | 72–512 px（8 种尺寸） | 在 manifest.json 中声明的主屏和应用列表图标。其中 192×192 和 512×512 是浏览器判定能否安装的必备尺寸。 |
| 可遮罩图标 | 192 与 512 px | Android 自适应图标。重要内容保留在 80% 安全区内，启动器可将其遮罩成任意形状而不裁切。 |
| Apple touch 图标 | 180×180 px | 用户将 Web 应用添加到主屏时，iOS 使用的主屏图标。 |
| Favicon | 16 / 32 / 48 px .ico + SVG | 显示在浏览器标签页、书签和历史记录中的图标。SVG 可清晰缩放，.ico 兼容旧版浏览器。 |
| iOS 启动屏 | 30+ 设备分辨率 | apple-touch-startup-image 启动画面，专门用来挡住已安装的 iOS Web 应用启动那一瞬间的空白白屏。 |
你的 PWA 图标下载包里有什么
一个 ZIP 打包 PWA 需要的所有文件，解压后整套丢进项目根目录即可。
icons/
八种 PNG 图标尺寸，外加 192 与 512 可遮罩变体，每张都用 upng-js 压缩到 100 KB 以内。
favicon/
favicon.ico（多分辨率）、favicon.svg、16/32/48 PNG 以及 180×180 的 apple-touch-icon。
splash/
覆盖每台 iPhone 与 iPad 的 30+ 张 apple-touch-startup-image PNG，外加一份带对应 <link> 媒体查询标签的 HTML 文件。
manifest.json
一份完整、可通过校验的 Web 应用 manifest，含 id、scope、显示模式、screenshots、shortcuts 与 categories。
service-worker.js
可直接用于生产的 service worker 模板 —— HTML 走 network-first、资源走 cache-first，并带版本化缓存清理。
install-snippet.html
你需要的全部 <head> 标签 —— manifest 链接、theme-color、favicon、Apple meta 与启动屏链接 —— 复制即可粘贴使用。
PWA 图标生成器常见问题
关于 PWA 图标、favicon、iOS 启动屏与 manifest 的解答。
PWA 图标需要哪些尺寸？
PWA 需要 192×192 用于主屏，512×512 用于启动屏。144×144、256×256 等额外尺寸能在不同设备上改善体验。本工具会生成全部 8 种常用尺寸以及可遮罩变体。
什么是可遮罩（maskable）图标？
可遮罩图标是为适配 Android 自适应图标形状而设计的 PWA 图标。它将重要内容保留在安全区内，因此当启动器把图标遮罩成圆形、超椭圆、圆角方形等形状时，图标仍能正确显示。
我需要 web manifest 文件吗？
需要。PWA 需要一个 manifest.json 来声明应用名称、图标、主题色、起始 URL 和显示模式，浏览器据此提供安装。本工具会为你生成一份完整、可通过校验器的 manifest。
为什么我的 iOS PWA 启动时显示白屏？
在 Web 应用启动期间，iOS 会显示空白白屏，除非你提供与各设备分辨率和方向匹配的 apple-touch-startup-image 启动屏。本工具会生成 30+ 张启动屏图片以及对应的 <link> 媒体查询标签，从而填满启动画面。
manifest id 是什么，为什么应该添加它？
manifest id 是 PWA 的稳定标识。即使 start_url 或 scope 发生变化，浏览器也能凭它识别为同一个应用，从而保持单一安装、避免重复。本工具会自动设置一个唯一 id，并允许你修改。
可以使用 SVG favicon 吗？
可以。现代浏览器通过 <link rel="icon" type="image/svg+xml"> 支持 SVG favicon。当你上传 SVG 时，本工具会保留原始矢量作为 favicon.svg，同时仍生成 .ico 和 PNG 作为旧浏览器的兜底。
我到底需要多少张 iOS 启动屏？
要在竖屏和横屏下覆盖当前的 iPhone 与 iPad 机型，大约需要 30 到 60 张图片，且每张都要配上精确的媒体查询。本工具会自动生成整套，无需你手动维护设备矩阵。
这个工具会把我的 Logo 上传到任何地方吗？
不会。每一张图标、favicon 和启动屏都在你的浏览器本地用 Canvas 渲染。你的 Logo 绝不会离开设备，也不会有任何图片发送到服务器 —— 你可以在浏览器的「网络」面板中验证这一点。
PWA 图标和原生 App 图标有什么区别？
PWA 图标写在 Web 应用 manifest 里，由浏览器和系统启动器来渲染，所以要准备可遮罩 PNG、favicon 这类面向 Web 的格式。原生 App 图标则打进平台安装包（.ipa / .apk），得按各家应用商店严格的资源目录来做。本工具帮你搞定的正是 PWA 这一侧的整套图标 —— 不用注册任何应用商店账号。
Favicon 应该多大尺寸？
标签页用 32×32 和 16×16 的 PNG，旧浏览器靠多分辨率的 favicon.ico（含 16/32/48），再配一张能适配任意像素密度的 SVG favicon 最稳妥；iOS 书签则用 180×180 的 apple-touch-icon。这些本工具一次上传就全给你生成好。
可以不上传 Logo 就生成 PWA 图标吗？
可以 —— 这正是本工具的核心。每一张图标、favicon 和启动屏都用 Canvas API 在本地渲染，你的 Logo 绝不会离开浏览器。没有服务器往返、无需账号、不加水印，因此用于机密或未发布的品牌素材也很安全。
PWA 必须有 service worker 才能安装吗？
想用菜单里的「安装应用」，新版 Chrome 已经不强制要 service worker —— 一份带齐图标的有效 manifest 就够了。但要做离线，或者想让浏览器主动弹出安装提示，就还得有一个带 fetch 处理器的 service worker。无论走哪条路，本工具都附带了一个开箱即用的 service worker 模板。
想深入了解？
PWA 图标要求与安全区域完整指南