企评社

Interface labels are shown in English. Company reviews, forum posts and tool descriptions are currently available in Chinese only.

PWA icons and splash screens generator

One source image to the full install set: icons of every size plus maskable, favicon.ico, manifest, iOS splash screens per device and a paste-ready HTML snippet

全部在浏览器本地生成,图片不上传、刷新即清空

源图

把图标拖到这里,或点击选择

推荐 SVG 或 ≥512 的正方形透明 PNG

背景与留白

maskable 图标固定按 80% 安全区绘制(每边 10%),不受此值影响。

格式与命名

manifest 字段

图标尺寸

180 会输出成 apple-touch-icon-180.png(Apple 约定名),其余为 icon-N.png;勾选 maskable 时同尺寸再多一份 -maskable。

启动屏机型

iPhone(0 条)
iPad / iPod(0 条)

机型清单快照版本 (来源 pwa-asset-generator 内置表,MIT 许可)。 Apple 已在 2026 年 9 月撤下官方的启动屏尺寸表,所以这类清单都是手工维护的快照——新机型没列出时,用上面的自定义视口按「CSS 尺寸 @DPR」补一条即可,不用等本页更新。 清单里很多机型视口与 DPR 完全相同(例如 iPhone 12 / 13 / 14 / 16e),本页会按媒体查询去重,同一份图只出一张、一个 link。

PWA 装机要的不是「一张图」,而是一整套按平台规矩摆好的资源。Android 侧(Chrome)读 manifest.webmanifest 里的 icons 数组,至少给 192 与 512 两档才能拿到像样的装机与快捷方式体验;iOS 侧至今不靠 manifest 定启动画面,而是要求为每一种屏幕尺寸各写一条 link rel="apple-touch-startup-image" 并带上精确的 media 查询,尺寸对不上就不显示——这正是手工维护最痛的地方,本页把它整块自动化了。

maskable 图标必须单独一套。Android 桌面会把图标按圆形、圆角方形等模板裁一刀,满铺设计的边缘(文字、细边框)会被切掉。规范做法是把内容收在中心 80% 的「安全区」内、四周留背景色,本页生成 -maskable 版时固定按 80% 安全区绘制,并在预览里画出安全区虚线。manifest 中它作为独立的 purpose: "maskable" 条目与 "any" 并列,浏览器各取所需。

机型清单会过期,所以本页把它当数据而不是秘密。Apple 于 2026 年 9 月从人机界面指南中撤下了启动屏尺寸表,社区(含本页所依据的 MIT 快照)只能手工维护。好消息是媒体查询只由「CSS 尺寸 + DPR + 方向」决定:59 条机型里其实只有 46 个唯一组合,iPhone 12 / 13 / 14 / 16e 共用同一张图。因此本页对同一媒体查询只出一张图、一个 link——重复堆 link 只会多出废字节,iOS 对同一个媒体查询只会用其中一条。新机型上市时,用「自定义视口」按 393x852@3 这种格式补一条,立刻可用。

深色启动屏有个 iOS 硬限制要知道。本页会生成 -dark 后缀的一组图,并把媒体查询写成 (prefers-color-scheme: dark) and (device-width: …)。但 iOS 只在添加到主屏幕那一刻读取并缓存启动图:用户之后切换系统深浅色,已装好的应用启动图不会变,必须删掉重新添加。这条不是本页能解决的,写在这里是为了别让它变成你的线上疑问。

favicon.ico 是本页自写的容器。图标先用浏览器原生 canvas.toBlob 编成 PNG,再把多张 PNG 按 ICO 的目录结构(6 字节头 + 每帧 16 字节目录项 + 图像数据)拼成单个 .ico。Vista 之后的浏览器都认 ICO 里装 PNG,因此不需要额外的位图编码;256 像素这一档按规范把宽高字节写成 0。若你的站点已全面支持 PNG favicon,这一项可以不要。

整个过程没有服务器参与。解码、缩放、绘制、JPG/PNG 编码、ICO 拼装、manifest 与 HTML 生成、ZIP 打包全部在你的浏览器里完成(ZIP 由自托管的 JSZip 生成),图片不出本机,也不写任何 cookie 或登录态;刷新页面即清空。

FAQ

一次生成会拿到哪些文件?和「图标多尺寸导出」有什么区别?

本页产出的是「装机资源包」:各尺寸图标(含 maskable 一套)、apple-touch-icon-180、favicon.ico、manifest.webmanifest、iOS/iPadOS 各机型启动屏,外加一份可直接粘进 head 的 HTML 片段,打包成一个 zip。只想拿几张不同尺寸的 PNG 图标(做 favicon、给设计稿用)请用「图标多尺寸导出」,那一页更短更直接,也不涉及 manifest 与启动屏。

为什么机型列表里很多机型合在一起?会不会漏机型?

因为启动屏的媒体查询只由 CSS 尺寸、DPR 和方向决定,跟机型名无关。iPhone 12、13、14、16e 都是 390×844@3,共用同一张图同一个 link,所以本页按媒体查询去重:清单 59 条机型实际只有 46 个唯一组合。这样既不会漏(去重是按查询精确合并的,合并后仍在同一行显示覆盖了哪些机型),也不会给 head 塞进几十条重复 link——同一个媒体查询 iOS 只会用其中一条,其余纯属废字节。

maskable 图标是什么?为什么还要单独一套?

Android 桌面会把图标按圆形、圆角方形等模板裁一刀,满铺图标的边缘内容会被切掉。maskable 图标要求把主体收在中心 80% 的安全区里、四周用背景色填满,桌面裁切时就不会伤到主体。本页勾上 maskable 后会在同尺寸外多出一份带 -maskable 后缀的文件,并在 manifest 里作为 purpose 为 maskable 的独立条目与 any 并列;预览格上画的虚线圆就是安全区,可以一眼看出会不会被裁到。

源图用什么格式、多大合适?

首推 SVG:启动屏最大边到 2868 像素,源图会被放大,位图放大就糊,矢量不会。用位图的话给最长边不小于 1024 的正方形透明 PNG 更稳。源图不必是正方形,非正方形会按短边等比缩放并在画布内居中(contain),不会拉伸变形。透明背景请选 PNG,选 JPG 时浏览器会把透明压成白色,本页会在你这么选时直接提醒。

深色模式的启动屏怎么生效?为什么我手机上没变?

勾上深色后会多出一批 -dark 结尾的图,link 的媒体查询写成 prefers-color-scheme: dark 加原尺寸条件,系统按当前深浅色挑一条。但 iOS 只在「添加到主屏幕」那一刻读取并缓存启动图,之后切换系统深浅色不会更新已装应用的启动图,必须删掉图标重新添加一次。这是 iOS 的限制,不是配置错了。

机型清单是哪来的?新机型没收录怎么办?

清单来自 pwa-asset-generator 随包内置的那份 iOS/iPadOS 启动屏尺寸表(MIT 许可),页面在机型清单区块里标了快照日期。Apple 已于 2026 年 9 月从人机界面指南中撤下官方尺寸表,现在这类表都是社区手工维护的快照,所以本页把它当可读的数据摊开展示,并留了自定义视口:按 CSS 宽×高@DPR 的格式(例如 393x852@3)填进去就能立刻生成,不用等本页更新清单。

favicon.ico 里的图为什么是 PNG?会不会不兼容?

ICO 只是一个容器:6 字节文件头加每帧 16 字节的目录项,图像数据可以是位图也可以是 PNG。Vista 之后的所有主流浏览器都支持 ICO 内嵌 PNG,体积也小得多,所以本页把 16、32、48 三档 PNG 原样装进一个 ico 文件(256 像素档按规范把宽高字节写成 0)。只有还在支持二十年前的老浏览器时才需要传统的 BMP 位图帧。

会上传吗?生成 100 多个文件浏览器扛得住吗?

不会上传。解码、缩放、绘制、JPG/PNG 编码、ICO 拼装、manifest 与 HTML 文本生成、ZIP 打包全部在你的浏览器里进行,图片不出本机,刷新即清空。规模上:全套含深色约一百二十多张图,逐张绘制完立刻释放画布内存,JPG 默认质量 70 时整包通常几 MB;如果只想先验证效果,先把机型点成「仅 iPhone」再清掉横屏,几十秒内就能出包。

Related tools