rel="icon" 的 sizes 属性实际无效，主流浏览器均忽略它，仅依据文件真实尺寸、type 类型、声明顺序及 manifest.json 或 media 查询选图；type 是校验开关，sizes 必须与 type 严格匹配才生效。
定义不同分辨率下的站点资源标识">
rel="icon" 的 sizes 属性到底有没有用
没有用。Chrome、Firefox、Safari、Edge 全部静默忽略 sizes 属性——不报错，也不据此选图。你写 sizes="32x32" 或 sizes="192x192"，浏览器只看文件头里真实的像素尺寸，不是你“说”它有多大。
真正起作用的是：href 指向的文件真实尺寸、type 类型、声明顺序，以及是否配合 media 查询或 manifest.json。规范里定义了 sizes，但实现层面压根不读它。
- 写了
sizes="16x16"但文件其实是 64×64 PNG → 浏览器仍按 64×64 解析，可能模糊显示 -
type漏掉或写错（比如 PNG 写成type="image/jpg"）→ 某些浏览器直接跳过该<link> - 多个
<link rel="icon">并存时，浏览器只取第一个能成功加载的，后面的即使尺寸更优也无效
type 和 sizes 必须严格配对才生效
type 不是可选项，是浏览器校验资源合法性的开关；sizes 不是装饰，是匹配依据——错一个，整条 <link> 就被跳过。
-
type="image/x-icon"→ 只能配.ico文件；sizes对它无效（.ico自带多尺寸） -
type="image/png"→ 必须带sizes="32x32"或sizes="192x192"；格式必须是英文小写x，不能是32×32（中文乘号）、32px或32 -
type="image/svg+xml"→ Chrome 110+ 要求必须声明，否则拒载；Safari 当前不支持 SVG 作为rel="icon"
服务器返回的 Content-Type 与 HTML 中 type 冲突时，Chrome 以响应头为准，HTML 里的 type 形同虚设。
不同平台要各自配，不能指望一行搞定
rel="icon" 对 iOS 主屏幕、Android PWA 安装横幅完全不起作用——它们走的是另一套机制。
- iOS Safari 忽略所有
rel="icon"，只认rel="apple-touch-icon"，且要求 PNG、180×180、无透明边距、纯色背景 - Android Chrome PWA 安装界面依赖
manifest.json中的icons数组，或 HTML 中显式声明的sizes="192x192"PNG - 漏掉
<link rel="manifest" href="/site.webmanifest">，PWA 图标大概率空白
rel="apple-touch-icon" 必须存在，且 href 指向的文件名最好明确标注尺寸，比如 /apple-touch-icon-180x180.png。
最稳的写法：物理尺寸文件名 + 多个 link + manifest 收口
放弃用 sizes 做逻辑判断，用文件名显式表达尺寸，用 manifest.json 统一收口 PWA 图标，再补上 apple-touch-icon 覆盖 Apple 生态。
- 保留
<link rel="icon" href="/favicon.ico" type="image/x-icon">作兜底 - 为常见尺寸单独声明 PNG：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">、<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> - 加一行
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> - 必须加
<link rel="manifest" href="/site.webmanifest">，且site.webmanifest中的icons数组要包含至少192x192和512x512两个尺寸
真正难的不是写对一行 <link>，而是让每种设备都按你预期加载对应资源——缓存、MIME、路径、尺寸、平台规则，缺一环就断在那一环。
