sizes属性在favicon场景下被所有主流浏览器静默忽略，实际起作用的是文件真实尺寸、type类型、声明顺序及manifest.json或media查询；正确做法是为各尺寸提供独立文件并显式声明。
Link 标签的 sizes 属性在 favicon 场景下实际不起作用
它被所有主流浏览器（Chrome、Firefox、Safari、Edge）静默忽略——不报错，也不据此选择图标。你写 sizes="192x192"，浏览器只看文件头里真实的像素尺寸，而不是这个属性值。规范里虽定义了它，但实现层面根本没读。
真正起作用的是文件物理尺寸 + 多个 <link> 声明
浏览器靠的是 href 指向的文件真实宽高、type 类型、声明顺序，以及是否配合 manifest.json 或 media 查询。正确做法是为每个尺寸准备独立文件，并显式声明：
-
<link rel="icon" type="image/x-icon" href="/favicon.ico">—— 保留 .ico 文件兜底，它本身可打包多个尺寸（16×16/32×32/48×48） -
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">——sizes这里只是标注，不是指令；文件必须真是 32×32 像素 -
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">—— PWA 启动图必需，Android 会优先取这个 -
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">—— iOS/macOS 不认rel="icon"，必须单独写，且sizes在这里才被 Safari 实际读取
用 media 替代 sizes 做分辨率适配
想按设备像素比加载不同图标？sizes 不行，但 media 可以：
彩色通用功能图标合集矢量素材
下载
彩色通用功能图标合集矢量素材适用于手机APP应用软件UI界面设计、企业官网后台导航栏、商业企划书PPT排版美化、产品功能说明书配图等相关视觉场景设计，由AI生成的Ai格式素材。
<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)">
注意：media 只对 PNG/SVG 有效；.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 写得再全，只要 manifest.json 里没配 icons 数组，PWA 安装后的启动图还是灰色；而 iOS 设备完全无视 rel="icon" 的任何声明，只认 rel="apple-touch-icon"。
