HTML怎么做Manifest图标_HTML Manifest icons图标配置【进阶】-html教程-PHP中文网

有效icons数组需包含至少两个png图标对象，src为相对于manifest.json的可访问路径，sizes严格写为"192x192"和"512x512"字符串格式，type显式设为"image/png"，且服务器须正确返回content-type: application/manifest+json。

html怎么做manifest图标_html manifest icons图标配置【进阶】

manifest.json 里的 icons 数组怎么写才有效

浏览器只认 icons 数组里 src 可访问、sizes 格式严格匹配、type 是 image/png 的条目。其他格式（JPG、SVG、WebP）或尺寸缺失，会导致图标不显示或“添加到桌面”失败。

src 必须是相对路径（如 "icons/icon-192.png"），且实际文件必须存在并返回 200；绝对 URL（如 "https://example.com/icon.png"）在部分 Android 浏览器中会被忽略
sizes 值必须是 "192x192" 这种字符串格式，不能写成 192 或 "192"；多个尺寸用空格分隔（如 "192x192 512x512"）仅在单个对象中无效，每个尺寸需单独一个对象
至少提供两个对象：一个 sizes: "192x192"，一个 sizes: "512x512"；少于任一尺寸，Chrome DevTools 的 Application → Manifest 面板会标黄警告，iOS Safari 可能拒绝安装
type 字段建议显式写成 "image/png"；省略或写错（如 "image/jpg"）不会报错，但图标大概率不加载

图标路径 404 是最常见失效原因

manifest.json 文件本身能加载，不代表图标能加载——src 路径是相对于 manifest.json 所在位置解析的，不是相对于 HTML 页面。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

如果 manifest.json 在根目录（/manifest.json），而图标放在 /assets/icons/logo.png，那 src 就得写 "assets/icons/logo.png"，不能写 "./assets/icons/logo.png" 或 "/assets/icons/logo.png"
开发时用 python3 -m http.server 启服务，它不支持 MIME 类型协商，但图标本身是静态资源，只要路径对、返回 200 就行；真正要检查的是 Network 面板里每个 src 是否触发了 404
构建工具（如 Vite、Webpack）若把图标哈希重命名（如 icon.abc123.png），必须同步更新 manifest.json 中的 src，否则上线即失效

Android 和 iOS 对 icons 的实际使用逻辑不同

iOS Safari 安装 PWA 时只读取 icons 数组中第一个匹配尺寸的对象；Android Chrome 则按需选取最接近的尺寸。这意味着顺序和密度声明很关键。

iOS 不识别 density 字段（该字段是旧版 Android WebView 遗留），写了也无用；但 sizes 必须精确匹配设备逻辑像素（如 iPhone 15 Pro Max 主屏幕用的是 180×180，但系统会 fallback 到 192×192）
Android 设备会优先选 sizes ≥ 屏幕所需尺寸的最小项；所以放一个 "192x192" 和一个 "512x512" 就够用，不用塞一堆 36×36～192×192 的密度变体（那是原生 Android android-icon-*.png 的事）
如果你的 manifest.json 里 icons 第一项是 36x36，iOS 可能就只用它生成模糊的主屏幕图标——务必把 192x192 放数组最前面

服务器没配对 MIME 类型，图标再全也没用

manifest.json 文件本身必须由服务器以 Content-Type: application/manifest+json 返回，否则整个 manifest 被忽略，图标自然不生效。

Nginx 示例配置：
```
types {<br>  application/manifest+json json;<br>}
```
注意不是 application/json，也不是 text/plain
Apache 示例：AddType application/manifest+json .json —— 但这样会把所有 .json 都打上该类型，更稳妥的是用 <files> ForceType application/manifest+json </files>
本地开发用 http-server -c-1（禁用缓存）比 python -m http.server 更可靠，后者根本没法设响应头
可在 Chrome DevTools 的 Network 面板点开 manifest.json 请求，看 Response Headers 里是否有 content-type: application/manifest+json；没有就是白配