web app manifest 的 icons 配置不生效，八成因格式错误：必须为对象数组，每个对象含 src（相对路径如"icons/icon-192.png"）、sizes（字符串如"192x192"）、type（如"image/png"）三字段，且至少提供192×192和512×512 png 图标。
Web App Manifest 文件里 icon 字段怎么写
图标配置不生效，八成是 manifest.json 里的 icons 数组格式不对。它不是随便丢个路径就行，必须是对象数组，每个对象含 src、sizes 和 type 三个关键字段。
-
src必须是相对于 manifest 文件的相对路径（如"icons/icon-192.png"），不能用绝对 URL 或 base64 -
sizes是字符串，不是数字，比如"192x192"，多个尺寸用空格分隔（"192x192 512x512"） -
type建议显式声明，如"image/png"；浏览器不严格校验，但某些 PWA 安装流程会检查 MIME 类型匹配 - 至少提供
192x192和512x512两个尺寸——前者用于 Android 启动器图标，后者用于 Chrome OS 和安装横幅
HTML 中 link 标签引用 manifest 的常见错误
即使 manifest.json 写对了，HTML 里没正确挂载也白搭。最常漏掉的是 rel="manifest" 和路径错误。
- 必须放在
里，且推荐放在<title></title>之后、其他资源之前 - 写法只能是：
<link rel="manifest" href="/manifest.json">（注意rel值是"manifest"，不是"webmanifest"或"application/manifest+json"） -
href要确保能被浏览器直接请求到：打开 DevTools → Network 标签页，刷新页面，看manifest.json是否返回 200 且 Content-Type 是application/manifest+json或application/json - 不要加
type属性——现代浏览器忽略它，且可能干扰解析
图标文件本身容易被忽略的细节
图标显示模糊、有白边、或根本加载失败，往往和图像文件本身有关，而非代码逻辑。
- 必须是正方形 PNG（推荐），且无透明像素外扩——很多设计稿导出带 1px 透明边距，会导致 Android 渲染时裁切异常
- 建议用工具批量生成多尺寸（如 RealFaviconGenerator 或
sharpCLI），避免手动缩放失真 - 文件名别含中文或空格；路径层级不宜过深，
/icons/icon-192.png比/assets/images/app/icons/v2/light/icon-192.png更稳妥 - 如果用了
srcset或imageset方式做响应式图标（非 manifest 场景），那和 manifest 无关——manifest 的icons不支持srcset语法
调试 manifest 图标不显示的三步检查法
别急着改代码，先确认基础链路是否通。Chrome 最新版 DevTools 提供了专用面板，但很多人没点开。
- 打开页面 → F12 → Application 标签页 → 左侧选中
Manifest→ 看右侧面板是否列出图标，以及每项的Status是不是Valid - 如果显示
Failed to load，点开对应图标 URL，看是否 404 或 CORS 阻止（尤其本地 file:// 协议下，必须用本地服务器启动） - 如果图标列表正常但桌面快捷方式仍用默认图标，检查是否已安装过旧版 PWA——浏览器缓存 manifest，需卸载后重装，或在 Application → Clear storage → “Clear site data”
manifest 图标生效依赖完整链路：HTML 引用正确 → 文件可访问 → JSON 结构合规 → 图像文件可用 → 浏览器未缓存旧版本。任一环节卡住，都会静默失败，没有明显报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
