无需登录 数据私有 本地保存

PWA启动画面生成 - 图标与背景色配置

12
0
0
0

PWA 启动画面生成器

上传图标，配置颜色，预览启动画面，一键生成 Manifest 及所需代码

配置面板

点击上传或拖拽图标

支持 PNG / JPG / WebP，建议 ≥ 512×512px

图标尺寸小于512px，部分大尺寸图标将无法生成高清版本
生成的图标尺寸 8个尺寸
实时预览
9:41
图标 My PWA App

模拟 Android PWA 启动画面效果

manifest.json 
// 请上传图标并配置参数
HTML <head> 代码 
// 请上传图标并配置参数
常见问题 & 知识点
PWA 启动画面是什么？如何触发？
PWA 启动画面（Splash Screen）是用户点击 PWA 应用图标后、应用完全加载前显示的过渡画面。在 Android 上，当 PWA 以 standalone 或 fullscreen 模式启动时，Chrome 会根据 manifest.json 中的 background_color、theme_color 和 icons 自动生成启动画面。无需额外编写 HTML 或 CSS，系统会自动完成。
background_color 和 theme_color 有什么区别？
background_color：启动画面的背景色，也是应用加载前的占位背景色。建议与应用的初始背景色一致，以实现平滑过渡。

theme_color：浏览器 UI（如状态栏、地址栏）的主题色。在 Android 上影响状态栏颜色，在桌面端影响浏览器标签页颜色。两者配合使用能打造一致的品牌体验。
需要哪些尺寸的图标？
推荐准备以下尺寸的 PNG 图标：72×72、96×96、128×128、144×144、152×152、192×192、384×384、512×512。其中 192×192 和 512×512 是最关键的尺寸。对于 iOS 设备，额外需要 180×180 的 apple-touch-icon。上传一张 ≥ 512×512 的高清图标即可生成所有尺寸。
iOS Safari 支持 PWA 启动画面吗？
iOS Safari 对 PWA 启动画面的支持与 Android 不同。在 iOS 上，需要使用 apple-touch-icon 链接标签，并且可以通过多个 apple-touch-startup-image 链接为不同 iOS 设备提供精确的启动画面图片。不过在实际开发中，许多开发者选择使用 180×180 的 apple-touch-icon 配合 apple-mobile-web-app-capable meta 标签来简化配置。
为什么我的 PWA 没有显示启动画面？
常见原因包括：
1) manifest.json 中缺少 background_color 字段；
2) 图标尺寸不完整，特别是缺少 192×192 和 512×512 的图标；
3) PWA 未正确安装到主屏幕；
4) 浏览器缓存了旧版 manifest，尝试清除缓存后重新安装；
5) display 模式设置为 browser（只有 standalone/fullscreen 才有启动画面）。
什么是 maskable 图标？
Maskable 图标是 Android 自适应图标格式，系统可以将其裁剪为不同形状（圆形、方形、圆角方形等）以适应不同设备的图标风格。在 manifest.json 的 icons 数组中，可以设置 "purpose": "maskable" 来标识自适应图标。对于启动画面，通常使用 "purpose": "any" 的图标，以确保完整显示。
🔧 相关工具