sizes属性对favicon无效，浏览器实际依据文件真实尺寸、type、声明顺序及manifest.json选择图标；应为每种尺寸单独声明link，用文件名明确标注尺寸，并配合media查询和manifest.json确保兼容性。
link标签里的sizes对favicon根本不起作用
你写的sizes="32x32"或sizes="192x192"，Chrome、Firefox、Safari、Edge 全部静默忽略——不报错，也不据此选图。规范里虽定义了它，但浏览器实现层面压根不读这个属性。实际起作用的是：href指向的文件真实像素尺寸、type类型、声明顺序，以及是否配合media查询或manifest.json。
真正有效的多尺寸图标写法是多个link并列+物理尺寸文件名
别靠一个sizes撑全场，得手动拆开声明，每个link对应一个真实尺寸的文件：
-
<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">—— iOS/macOS 不看rel="icon"，必须单独写
SVG图标加sizes="any"是伪解，多数场景直接失效
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">看着很美，但：
- Firefox 完全不支持 SVG favicon（截至2026年6月）
- Chrome 和 Safari 只在地址栏或 PWA 添加到主屏幕时可能渲染，桌面任务栏、标签页缩略图仍 fallback 到 PNG/ICO
-
sizes="any"不会触发自动缩放；若 SVG 没设viewBox或宽高不匹配，渲染出来要么糊、要么裁切 - 没有
media控制，无法按深色模式或 DPR 切换——macOS Safari 的prefers-color-scheme只对rel="mask-icon"有效
验证图标是否真被加载，别信sizes写了没写
打开 DevTools → Network → 过滤favicon，刷新页面，看实际发出的请求是哪个文件。再右键地址栏图标 → “检查元素”，看 computed styles 里 background-image 是否指向你预期的资源。常见陷阱包括：
- 写了
sizes="16x16"但文件其实是 64×64 PNG → 浏览器仍按 64×64 解析，可能模糊显示 - 漏掉
type属性 → 某些浏览器直接跳过该link - 多个
link中 ICO 放在最后 → 旧版 IE 或某些安卓 WebView 会只认第一个且忽略后续 - PWA 场景下没配
manifest.json里的icons数组 → 即使 HTML 里写了 512×512，安装后启动图仍是默认灰色
最稳的路径：放弃用sizes做逻辑判断，用文件名显式表达尺寸，用media控制加载时机，用manifest.json统一收口 PWA 图标，再补上apple-touch-icon覆盖 Apple 生态——浏览器对图标的解析比文档写得保守得多，手动对齐才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
