生成 manifest 后还需要做什么？

需要在 HTML head 里用 link rel="manifest" 引入，准备对应尺寸的图标文件，并通过 HTTPS 提供；离线访问还需另写并注册 Service Worker。

WEB APP MANIFEST · 配置台 v1.1

PWA manifest 生成器：配置与图标一步搞定

Q: manifest.json 怎么写？

最小可用版本至少包含 name、short_name、start_url、display 与 icons，其中图标建议含 192 与 512 两档，再补 theme_color 与 background_color。页面会实时生成格式化后的 JSON，复制或下载即可。

Q: theme_color 怎么设置？

写成合法 hex，例如 #2b4b9b，不要写颜色名。它影响浏览器 UI 与任务切换卡片着色，启动画面底色由 background_color 控制，页面手机预览会分别显示。

Q: 图标尺寸清单要包含哪些档？

常见档位有 16、32、48、72、96、128、144、192、256、384、512 像素，安装场景一般要求至少 192 与 512 两档。页面只输出清单与 JSON 条目，图片文件需自行准备。

Q: start_url 与 scope 有什么约束？

两者应同源，且 scope 要覆盖 start_url 所在路径，否则安装后导航可能被判为超出应用范围。页面会做同源检查并给出错误提示。

填 名称、启动页、显示模式、主题色，右侧手机预览与 manifest.json 同步刷新； 十一档图标尺寸、maskable 用途、字段校验与 HTML 引入片段一次给全。纯本地生成，配置不上传。

0已填字段

0图标档位

0校验错误

提示：manifest 只管安装与外观，真正的离线访问需要另写 Service Worker。

实时预览随主题色变化

9:41●●● ▰

应用名称

standalone

theme background

应用名称 name

示例：

01 应用信息

基础字段

短名称 short_name 描述 description 启动页 start_url 作用域 scope

语言 lang 分类 categories

02 显示与外观

display / color

显示模式屏幕方向

主题色 theme_color

背景色 background_color

需要离线访问 仅输出提醒，不生成 Service Worker

03 快捷方式

shortcuts

快捷项 1 名称链接

快捷项 2 名称链接

manifest.json

0 行 · 实时生成

字段校验

—

图标尺寸清单

点击勾选

方块按真实边长比例绘制；安装通常要求至少含 192 与 512。

用途 purpose

尺寸	文件名	purpose

还没有勾选尺寸。

Service Worker 提醒

当前未勾选离线需求。若需要离线访问，请另写并注册 Service Worker，manifest 本身不提供离线能力。

批量方案对比

改主题色 / 名称后各存一套

方案	名称	theme_color	display	图标	错误	操作

还没有方案，填好配置后点「保存当前配置」。

⚙️字段口径与常见误填先校验，再上线

字段口径	输出遵循 Web App Manifest 常用字段：name、short_name、start_url、display、icons 等。未填的可选字段不会写进 JSON，避免生成一堆空值。
theme_color	影响浏览器与系统 UI 的着色（地址栏、任务切换卡片），必须是合法 hex 颜色；background_color 用于启动画面底色，两者不是一回事。
图标尺寸	清单按 16 / 32 / 48 / 72 / 96 / 128 / 144 / 192 / 256 / 384 / 512 十一档列出，方块按边长比例绘制。安装场景通常要求至少含 192 与 512 两档。
purpose 用途	any 是普通图标，maskable 会被系统裁成圆形等形状，需要留出安全区。页面只为勾选的尺寸生成条目，不替你生成图片文件。
start_url / scope	start_url 是安装后打开的入口，scope 限定应用可导航的范围；两者必须同源且 scope 要覆盖 start_url，校验栏会给出提示。
离线能力	manifest 只负责安装与外观，真正的离线访问需要另外编写 Service Worker 并注册。页面会提示这一点，不会把「勾选离线」当成已实现离线。

这个工具解决什么问题

写 manifest.json 最容易漏的是图标尺寸、purpose 与颜色字段格式：少一个 512 图标、把 theme_color 写成颜色名、start_url 和 scope 不同源，都会让安装体验打折。本页把这些字段摊开成表单，边填边看 JSON、边看校验结果，还能直接拿到图标清单与 HTML 引入片段。

四条实用原则

先定名称与入口：name 用于安装横幅与的应用列表，short_name 用于主屏幕图标下方，start_url 决定安装后打开哪一页。
图标宁多勿少：至少准备 192 与 512 两档 PNG，maskable 版本单独留安全区；页面只输出清单，不生成图片。
颜色用 hex：theme_color 与 background_color 写 #RRGGBB 或 #RGB，页面会校验格式并在手机预览里实时着色。
导出前看校验：错误项要修完再上线，警告项按项目情况判断；复制 JSON 后建议再用格式化工具复核一次缩进与转义。

按这几步用

选一套示例：博客、电商、工具站三套预设，点一下就能看到完整的字段组合。
填应用信息：名称、短名称、描述、启动页、作用域、语言与分类逐项填写，改动即时反映到右侧 JSON。
配显示与颜色：选 display 与方向，用取色器或手输 hex 设置 theme_color 与 background_color，手机预览同步变化。
勾图标尺寸：在尺寸矩阵里勾选要发布的档位，并给每档指定 any / maskable 用途，校验栏会检查 192 与 512。
看校验结果：必填、颜色格式、URL 同源、尺寸去重与快捷键合法性都会列出，错误项标红。
导出或批量对比：复制或下载 manifest.json、复制 HTML 引入片段；保存多套配色方案横向对比并批量导出 JSON 数组。

小提示

字符串里的双引号、反斜杠与换行由 JSON 序列化自动转义，HTML 片段里的名称也会做实体转义，不需要手动改。导出弹窗只在你点「生成 / 导出 / 分享」后出现。

更新记录

v1.0 2026-11-10 首次上线：manifest 实时生成、十一档图标矩阵、手机预览、字段校验、HTML 片段与方案批量导出。
v1.1 2026-11-10 补充深色主题、窄屏三栏折叠与 JSON 语法着色。

常见问题

manifest.json 怎么写？

最小可用版本至少包含 name、short_name、start_url、display 与 icons（含 192 和 512 两档 PNG），再补 theme_color 与 background_color。在页面上把这些字段填完，右侧会实时生成格式化后的 JSON，复制或下载即可。

PWA 配置里 theme_color 怎么设置？

写成合法 hex，例如 #2b4b9b 或 #2b4b9bff 之外不要写颜色名。它主要影响浏览器 UI 与任务切换卡片的着色；启动画面底色另由 background_color 控制，页面手机预览会分别显示两处效果。

web app manifest 生成后还需要做什么？

还要在 HTML 的 head 里用 link rel="manifest" 引入，准备对应尺寸的图标文件，并通过 HTTPS 提供；若需要离线访问，还需另写并注册 Service Worker。页面会生成引入片段，但不会替你创建图片或脚本。

图标尺寸清单要包含哪些档？

常见档位是 16、32、48、72、96、128、144、192、256、384、512 像素。安装场景一般要求至少 192 与 512 两档，勾选后校验栏会检查；页面只输出清单与 JSON 条目，图片文件需要自己准备。

maskable 和 any 有什么区别？

any 是普通图标；maskable 会被系统按圆形、方圆形等遮罩裁剪，图案要放在中心安全区以内。页面允许为每个尺寸单独指定用途，并在图标矩阵上标出 maskable 档位。

start_url 与 scope 有什么约束？

两者应当同源，且 scope 要覆盖 start_url 所在路径，否则安装后导航可能被判为超出应用范围。页面会用你填的值做同源检查，不一致时给出错误提示，但不会自动改写。

特殊字符会破坏 JSON 吗？

不会。名称、描述里的双引号、反斜杠与换行由 JSON.stringify 自动转义；HTML 引入片段里的文本也会做实体转义。校验栏同时会检查解析后的 JSON 是否合法。

能一次导出多套配置吗？

可以。填好一套后点「保存方案」，改主题色或名称再存一套，对比表会列出各套的名称、颜色与图标档数；点批量导出会下载一个包含全部 manifest 的 JSON 数组文件。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！