link的sizes属性在favicon场景下被所有主流浏览器静默忽略，实际图标选择依赖文件真实尺寸、type、声明顺序及manifest.json；仅ios的rel="apple-touch-icon"会校验sizes，但不用于匹配。
link 的 sizes 属性在 favicon 场景下基本不生效
你写 sizes="192x192"，Chrome、Firefox、Safari、Edge 全部静默忽略——不报错，也不据此选择图标。浏览器只读取文件头里真实的像素尺寸，而不是这个字符串。它不是“指令”，只是个可选标注，标准写了，但实现没读。
真正起作用的是文件真实尺寸 + 多个 <link> 并列声明
浏览器靠的是：href 指向的 PNG/SVG/ICO 文件本身的宽高、type 值、声明顺序，以及是否配合 manifest.json。实操建议如下：
-
<link rel="icon" href="/favicon.ico">—— 必须保留，.ico 文件要打包 16×16、32×32、48×48、256×256 多个图层，否则 Windows 任务栏图标模糊 -
<link rel="icon" type="image/png" href="/icon-32.png" sizes="32x32">——sizes这里不控制选择，但显式声明能提升部分旧版浏览器兼容性 -
<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">—— Android PWA 启动图依赖这个文件真实尺寸，不是sizes值 -
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">—— iOS 只认这个rel，sizes在这里才被 Safari 实际读取（但仅作校验，不参与匹配）
想按设备像素比加载不同图标？用 media，别用 sizes
sizes 不能响应 dppx 或 prefers-color-scheme，但 media 可以：
<link rel="icon" type="image/png" href="/favicon-32.png" media="(max-resolution: 1dppx)"><link rel="icon" type="image/png" href="/favicon-64.png" media="(min-resolution: 2dppx)">- 注意：
.ico不支持media切换；Safari 对media="(prefers-color-scheme: dark)"配合rel="mask-icon"有特殊支持，但仅限 macOS/iOS
调试时别信 sizes 声明，直接看网络请求和渲染结果
最可靠验证方式只有两个：
- 打开 DevTools → Network → 过滤
favicon，刷新页面，看哪个文件被真实请求 - 右键地址栏图标 → “检查元素”，看 computed styles 里
background-image是否指向你预期的资源 - 常见陷阱：
sizes="16x16"但文件其实是 64×64 PNG → 浏览器仍按 64×64 解析，可能模糊；漏掉type→ 某些浏览器直接跳过该<link>
复杂点在于：即使你把 sizes 写得再全，只要 favicon.ico 里没嵌入对应图层（比如缺 48×48），Windows 任务栏就只能 fallback 到模糊缩放图——sizes 不会触发任何缩放逻辑，它连试都不试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
