sizes属性在link标签中仅对rel="icon"有效，但Chrome、Firefox、Edge、Safari等主流浏览器均不解析它做图标匹配，实际依赖文件真实尺寸、格式、声明顺序及manifest.json中的sizes定义。
sizes 属性在 link 标签中**仅对 rel="icon" 有效，但它几乎不被任何主流浏览器实际解析或使用**。你写 sizes="32x32"，浏览器不会据此选择图标，也不会报错——它只是安静地忽略。
为什么 sizes 属性看起来“没用”
标准定义说它用于声明图标的尺寸，但现实是：Chrome、Firefox、Edge、Safari（包括 iOS）均不读取该属性做图标匹配。它们靠的是——
- 文件本身的像素尺寸（比如一个 PNG 文件实际是 192×192，哪怕你写
sizes="64x64"，浏览器仍按真实尺寸识别） - 文件格式和命名习惯（如
apple-touch-icon.png被 iOS Safari 特殊识别） - 多个
link标签并列时的声明顺序（部分浏览器会取第一个能加载成功的）
sizes 在哪些地方“被误用”最多
常见错误场景包括：
- 只写一个
<link rel="icon" href="icon.png" sizes="192x192">，以为这样就能适配 PWA —— 实际上没有type、没配manifest.json，PWA 图标根本不会生效 - 在
rel="shortcut icon"或旧式写法里加sizes—— 这个rel值本身已过时，sizes更不会起作用 - 给 SVG 图标加
sizes="any"并认为这是“万能解”——但多数桌面浏览器不支持 SVG favicon，iOS 也不认这个声明
真正决定图标显示效果的关键点
别依赖 sizes，盯住这三件事：
立即学习“前端免费学习笔记（深入）”；
-
href指向的文件必须是真实尺寸匹配的（如 PWA 要求 192×192 和 512×512 的 PNG） - 为不同平台显式声明多个
link：比如<link rel="icon" href="/favicon.ico">（兜底）、<link rel="icon" type="image/png" href="/icon-32.png" sizes="32x32">（虽sizes不起作用，但多声明能提高命中率） - iOS 必须单独加：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">（它不看sizes，只认这个rel值） - 现代 PWA 场景下，
sizes的唯一“有效位置”是在manifest.json的icons数组里，例如：{"src": "icon-192.png", "sizes": "192x192", "type": "image/png"}
最常被忽略的一点：即使你写了十行带 sizes 的 link，只要 favicon.ico 文件里没嵌入对应尺寸（比如只含 16×16），Windows 桌面书签栏就只能显示模糊小图——sizes 不会“缩放”图标，它连尝试都不尝试。
