sizes属性对响应式图标链接无效，因HTML中rel="icon"的link标签不支持该属性，浏览器会静默忽略；正确做法是用多个link标签配合media查询和不同物理尺寸的文件。
为什么 sizes 属性对响应式图标链接没用？
因为 sizes 只在 <link rel="icon"> 中被浏览器忽略——它不是合法属性。W3C 规范明确要求：HTML 中的图标声明不支持 sizes 作为 <link> 标签的属性（哪怕你写了，Chrome/Firefox/Safari 都会静默丢弃）。真正起作用的是 media + href 组合，或通过 rel="icon" 的 type 和实际文件尺寸来触发匹配。
正确声明多尺寸 favicon 的写法
必须用多个 <link> 标签，每个带独立 href 和可选 media，靠文件本身分辨率（而非标签属性）区分用途：
-
sizes="16x16"和sizes="32x32"只在rel="icon"且type="image/x-icon"时有效（仅限 .ico 文件） - 对于 PNG/SVG 图标，
sizes属性形同虚设；浏览器只看文件头里的宽高或实际渲染像素 - 要适配高 DPR 屏幕，得靠
href指向不同物理尺寸的文件（如favicon-48x48.png、favicon-96x96.png），再配合media控制加载时机
<link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="16x16 32x32"> <link rel="icon" type="image/png" href="/favicon-48x48.png" media="(max-resolution: 1dppx)"> <link rel="icon" type="image/png" href="/favicon-96x96.png" media="(min-resolution: 2dppx)">
SVG favicon 的响应式陷阱
很多人以为给 SVG 图标加 sizes="any" 就能自适应，但实际效果极不可靠：
-
sizes="any"仅在rel="icon"+type="image/svg+xml"下被部分 Chromium 浏览器识别，Firefox 完全无视 - SVG 图标不会自动缩放为 16px/32px；它按原始 viewBox 渲染，若没设
width/height或viewBox不匹配，会模糊或裁切 - 桌面端任务栏、地址栏仍倾向使用 ICO 或 PNG，SVG 主要用于 PWA 添加到主屏幕场景
调试图标加载的实际方法
别信 sizes 声明是否“生效”，直接查网络请求和渲染结果：
- 打开 DevTools → Network → Filter
favicon，刷新页面，看哪个图标被真实请求 - 右键地址栏 favicon → “检查元素”，看 computed styles 里
background-image是否指向预期资源 - 在 macOS Safari 中，
media="(prefers-color-scheme: dark)"可配合深色模式图标，但需搭配rel="mask-icon"（仅 Safari 支持）
最稳妥的做法：放弃依赖 sizes 做响应式控制，用明确的多 <link> + 物理尺寸文件名 + media 查询组合，再加一层 rel="apple-touch-icon" 覆盖 iOS 场景。浏览器对图标的解析逻辑远比文档写的更保守，手动对齐才是关键。
