安卓设备完全忽略HTML中link标签的sizes属性,仅依据manifest.json的icons数组加载PWA图标;manifest中sizes必须为字符串如"192x192",路径推荐绝对路径,且需确保HTTP响应头为application/manifest+json。

安卓设备完全不读sizes属性,只认manifest.json里的icons数组
你在HTML里写再多的sizes="192x192"或sizes="512x512",Android Chrome、Edge、Firefox 都不会据此加载图标——它们压根不解析link标签的sizes。PWA安装后的启动图、桌面快捷方式图标,全部来自manifest.json中icons字段定义的资源。
- 即使HTML中
<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">声明正确,若manifest.json里没配{"src": "icon-192.png", "sizes": "192x192", "type": "image/png"},安装后图标就是灰色块 -
manifest.json中的sizes值必须是字符串(如"192x192"),不能是数字192或带单位"192px" - 路径必须相对于
manifest.json文件位置;推荐用绝对路径,比如"/icons/icon-192.png",避免子页面下404
HTML中sizes="192x192"仅在无manifest时作fallback,且有严格前提
只有当页面**完全没提供manifest.json** 时,Android Chrome 才会退回到HTML中找rel="icon",并只认其中sizes="192x192"或sizes="512x512"的那一条——但前提是:
-
type="image/png"必须显式写出,漏掉就跳过 - 文件实际像素尺寸必须精确匹配(比如
favicon-192x192.png头信息确实是192×192,不是缩放出来的200×200) - 这条
link不能被其他rel="icon"提前“截胡”——顺序无关紧要,但若前面有type="image/x-icon",Chrome仍可能优先加载ICO而忽略后续PNG
常见错误:写了sizes却没生效的三个硬伤
调试时看到Android上图标还是默认灰色,大概率踩了以下任一坑:
- 写了
sizes="192x192",但PNG文件实际是256×256 → 浏览器按真实尺寸解析,PWA审核可能拒绝安装 -
manifest.json存在但icons数组为空、或sizes字段拼错成"192X192"(大写X)或"192×192"(中文乘号)→ 整个icons项被忽略 - HTML中
<link rel="manifest" href="/manifest.json">路径404,或HTTP响应头没返回Content-Type: application/manifest+json→ 浏览器根本不会加载manifest
验证是否真起作用,只看两处
别信代码写了没写,直接看运行时行为:
立即学习“前端免费学习笔记(深入)”;
- 打开Chrome DevTools → Application → Manifest → 点开
icons数组,确认每项src能点开预览,且尺寸正确 - 在Android Chrome中访问页面 → 点右上角「⋮」→ 「添加到主屏幕」→ 安装后长按图标 → 「应用信息」→ 查看「图标」是否清晰,不是模糊或灰色
真正复杂的点在于:HTML里的sizes和manifest.json里的sizes虽然同名,但一个被浏览器静默忽略,一个被强制校验——你得同时管好两个地方,且它们对格式、路径、MIME类型的容错性完全不同。



















