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

Web App Manifest 图标预览 - 模拟主屏图标效果

10
0
0
0

Web App Manifest 图标预览工具

上传图标,模拟 iOS / Android 主屏幕显示效果,生成标准 Manifest 配置

拖拽或点击上传图标

推荐 512×512 或更大,PNG / JPG / WebP / SVG

应用设置
Maskable 自适应形状预览

Android 启动器可能将图标裁剪为以下形状,Safe Zone(虚线)内内容保证可见

上传图标
圆角方形
上传图标
圆形
上传图标
Squircle
上传图标
水滴形
上传图标
方形
iPhone / iOS 主屏幕

自动圆角处理,无需手动裁剪

9:41   
Android / Pixel 主屏幕

自适应图标,形状取决于启动器

9:41   
各尺寸图标预览 & 下载

点击下载按钮获取对应尺寸图标,黄色虚线为 Maskable Safe Zone(安全区域占80%)

自动生成 manifest.json
等待上传图标...
常见问题 & 知识点

Web App Manifest 是一个 JSON 文件(通常命名为 manifest.json),它为 PWA(渐进式 Web 应用)提供元数据。通过它,浏览器可以在用户将网站添加到主屏幕时,使用指定的图标、名称、主题色等信息,让 Web 应用看起来像原生应用。没有 Manifest,添加到主屏幕只会显示一个简陋的截图或默认图标。

Android Chrome:至少 192×192 和 512×512(推荐同时提供 maskable 版本)。
iOS Safari:推荐 180×180(iPhone)、167×167(iPad Pro)、152×152(iPad)。iOS 使用 apple-touch-icon 而非 manifest 中的 icons。
Windows/Mac PWA:通常使用 192×192 或 512×512。
最佳实践:提供 48、72、96、144、192、512 共 6 个尺寸,覆盖所有主流平台。

Maskable Icon 是 Android 平台引入的自适应图标格式。不同于固定形状的图标,Maskable Icon 可以被启动器裁剪成圆形、圆角方形、Squircle 甚至水滴形。图标中心约 80% 的区域为 Safe Zone(安全区域),保证在任何形状下都可见。设计图标时应将核心内容(如 Logo)放在 Safe Zone 内,边缘 10% 可能被裁剪。在 manifest.json 中通过 "purpose": "maskable" 声明。

iOS:自动为图标添加圆角(约 22.5% 圆角半径),开发者上传正方形图标即可,无需手动裁剪。iOS 使用 <link rel="apple-touch-icon"> 标签而非 manifest.json 中的 icons 数组。
Android:使用 Maskable Icon 机制,启动器会根据其主题将图标裁剪为不同形状(圆形、方形等)。需要通过 "purpose": "maskable" 声明,并确保 Safe Zone 内有完整内容。

theme_color:影响浏览器工具栏、状态栏的颜色(在 Android Chrome 上尤为明显),营造沉浸式体验。应与品牌主色一致。
background_color:应用启动时瞬间显示的背景色(在图标和内容加载之前),应尽量接近应用的初始背景色,避免白屏闪烁。
两者配合使用可大幅提升 PWA 的启动体验。

standalone(推荐):像原生应用一样,隐藏浏览器地址栏和导航按钮,拥有独立窗口。适合大多数 PWA。
fullscreen:完全全屏,甚至隐藏状态栏。适合游戏或沉浸式媒体应用。
minimal-ui:保留最小浏览器 UI(返回、刷新按钮)。适合需要浏览器基础功能的应用。
browser:在浏览器中正常打开,无特殊处理。不推荐用于 PWA。

1. 使用 Chrome DevTools → Application → Manifest 面板查看解析结果。
2. 使用 Lighthouse(Chrome 内置)进行 PWA 审计。
3. 在 Android Chrome 中打开网站,检查"添加到主屏幕"提示是否出现。
4. 使用本工具模拟预览,确保图标在不同形状下都有良好表现。
5. 验证 JSON 格式是否正确(推荐使用 JSONLint)。