PWA 资源生成器 - 创建应用图标和清单

在浏览器中本地生成 PWA 图标和清单。您的图片永远不会离开您的设备。

上传图片

拖放图片到此处或点击选择文件

支持 PNG/JPEG，最小 512x512px

清单配置

应用名称

短名称

描述

起始 URL

主题颜色

背景颜色

对图标应用圆形蒙版

图标预览

192x192

192x192px

Android / Chrome

512x512

512x512px

启动画面

180x180

180x180px

iOS 主屏幕

512x512

512x512px

可遮罩 (自适应)

Manifest 预览

Head HTML 链接

💡 所有处理均在客户端完成，以确保隐私和速度。

什么是 PWA 资源生成器？

PWA 资源生成器是一个免费工具，可以帮助您从单个源图像创建渐进式 Web 应用程序 (PWA) 所需的所有资源。该工具会自动生成 favicon.ico、apple-touch-icon、各种尺寸的图标 (16x16, 32x32, 192x192, 512x512...) 和完整的 manifest.json 文件。所有处理都在客户端进行，确保您的图像处理速度快且绝对安全。

标准 PWA 图标尺寸

该工具会自动根据 PWA 和 Apple 标准生成图标，包括：

Favicon

favicon.ico (32x32) - 浏览器标签页上显示的图标

手机和平板电脑

192x192, 384x384, 512x512 - Android 和主屏幕的图标

Apple Touch 图标

180x180 - 添加到主屏幕时的 iOS 图标

各种尺寸

16x16, 32x32, 48x48, 72x72, 96x96, 120x120, 144x144, 152x152, 167x167

Manifest.json - PWA 的核心

manifest.json 文件是 PWA 最重要的配置文件，包含有关以下信息：

•应用名称 (name, short_name) - 安装时显示
•图标 - 所有图标及其尺寸和用途的列表
•主题颜色 - 应用栏和地址栏的主要颜色
•启动 URL - 从主屏幕打开应用时的启动 URL
•显示模式 - 显示模式 (standalone, fullscreen...)

主要功能

上传高清图像

支持 PNG/JPEG，最小尺寸为 512x512px 以获得最佳质量

多尺寸图标生成

自动调整大小并创建 13+ 种符合 PWA 和 Apple 指南的图标尺寸

自动 Manifest.json

生成包含完整元数据和图标引用的标准 manifest.json

Favicon.ico

创建用于 SEO 和浏览器标签页显示的标准 favicon.ico

客户端处理

100% 基于浏览器的处理，图像从未上传到服务器

ZIP 下载

将所有文件打包成一个方便的 .zip 文件

实际应用

PWA 开发

快速生成渐进式 Web 应用程序项目的资源，节省数小时的手动工作

网站品牌化

为网站创建专业的 favicon 和触摸图标，增强品牌识别度

移动应用落地页

为像移动设备上的原生应用一样工作的可安装网页准备资源

SEO 和 UX 优势

✓

Favicon 提高 SERP 点击率 - 用户更容易识别您的网站

✓

PWA 改善 Core Web Vitals - 更好的 Google 排名

✓

Apple Touch 图标 - 添加到 iOS 主屏幕时的原生体验

✓

完整的 manifest.json - Google 更好地索引和理解您的应用

重要说明

•源图像应至少为 512x512px，建议 1024x1024px
•使用透明背景 (PNG) 的图像以获得最佳效果
•所有处理都在本地进行，图像从未上传到服务器
•ZIP 文件包括：favicon.ico、图标 (13 种尺寸)、manifest.json

PWA 资源生成器使用方法

1
上传至少 512 x 512 像素的正方形 PNG 或 JPEG 标志。周围留有一些空白的简单图形在小尺寸下效果最好。
2
填写清单字段：应用名称、短名称（显示在主屏幕图标下方）、描述、启动 URL、主题色和背景色。
3
如需圆形图标可开启圆形遮罩，然后查看 Android、iOS、启动画面和 maskable 图标的预览。
4
点击 Generate & Download 下载包含所有尺寸图标和 manifest.json 的 ZIP 包，并把下方显示的 HTML link 标签复制到网站的 <head> 中。

实际应用示例

让网站可以安装

Chrome 和 Edge 只有在存在包含 192 和 512 像素图标的有效清单时，才会显示"安装应用"。生成的文件满足这些要求。

iOS 主屏幕图标

Safari 会忽略清单中的图标，改用 apple-touch-icon。ZIP 包中包含 180 x 180 图标及对应的 link 标签。

Android 的 maskable 图标

Android 会根据设备把图标裁剪成圆形或圆角方形。maskable 图标让标志保持在安全区域内，不会被裁掉。

快速更换品牌形象

标志更新后只需上传一次新文件即可替换整套图标，无需从设计工具中手动导出十几种尺寸。

常见问题

什么是 Web 应用清单？+

manifest.json 是一个小型 JSON 文件，告诉浏览器 Web 应用的名称、图标、颜色和启动 URL。有了它，网站才能像原生应用一样被安装和启动。

真正必需的图标尺寸有哪些？+

要满足可安装条件，Chrome 至少需要 192 x 192 和 512 x 512 的图标，iOS 使用 180 x 180 的 apple-touch-icon。其他尺寸能让部分启动器和旧设备显示得更清晰。

theme_color 和 background_color 有何区别？+

theme_color 决定浏览器工具栏和任务切换界面的颜色，background_color 是应用加载时启动画面的背景色，应与首屏背景一致。

我的图片会被上传吗？+