必须用多个<link rel="icon">并列声明不同尺寸的PNG图标，如16x16、32x32、192x192，并配准type和绝对路径；iOS需额外<link rel="apple-touch-icon">且至少180x180。
link标签怎么写才能适配高DPI屏幕
HTML里单靠 <link rel="icon"> 默认只能加载一个图标，高DPI设备（比如Retina屏、Windows高缩放比）会模糊或拉伸。必须用 sizes 和 type 配合多个 <link> 声明，让浏览器按需选择。
- 只写一个
<link rel="icon" href="favicon.ico">—— 浏览器会 fallback 到它，但无法区分密度 - 必须显式声明尺寸：比如
sizes="16x16"、sizes="32x32"，且值必须是精确数字，不能写"any"或留空 -
type属性强烈建议带上，比如type="image/x-icon"（.ico）或type="image/png"（.png），否则某些浏览器（尤其是Safari）可能忽略该条目 - 顺序无关紧要，但推荐从小到大排列，方便调试时快速定位
要不要用.png替代.ico来支持高密度
要。.ico 格式虽兼容老浏览器，但单个文件内嵌多尺寸能力有限，且现代高DPI设备更倾向加载明确尺寸的 PNG。
- .ico 文件可打包 16×16、32×32、48×48 等，但 Chrome 和 Firefox 对其中高分图标的支持不稳定；Safari 基本只读第一个尺寸
- PNG 更可控：可为 1x/2x 单独提供，例如
favicon-16x16.png和favicon-32x32.png，配合sizes精准匹配 - 注意：iOS Safari 不识别
sizes，它只认<link rel="apple-touch-icon">，这个必须单独加，且建议至少提供 180×180 尺寸
Chrome和Firefox对sizes属性的实际行为差异
两者都支持 sizes，但解析逻辑不同，容易导致“写了却没生效”。
- Chrome 会优先匹配设备像素比 × 声明尺寸最接近的项。例如设备 DPR=2，它更倾向选
sizes="32x32"而非"16x16"，即使后者存在 - Firefox 更严格：如果页面缩放不是 100%，它可能完全忽略
sizes，回退到第一个<link rel="icon"> - 不要依赖
sizes="16x16 32x32"这种写法——这是无效语法，sizes只接受单组宽高，多尺寸必须拆成多个<link> - 验证是否生效：打开 DevTools → Application → Manifest，看 “Favicons” 列表是否列出多个尺寸并标出当前激活项
实际推荐的link组合写法
兼顾兼容性、清晰性和可维护性，下面这组是目前线上项目验证有效的最小可行集合：
立即学习“前端免费学习笔记（深入）”；
<link rel="icon" type="image/x-icon" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/x-icon" 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.png">
注意：192x192 是 PWA 安装图标所需，不是 Favicon，但常被一起管理；apple-touch-icon 必须独立声明，且不能省略 sizes，否则 iOS 可能拉伸。
最容易被忽略的是：所有路径必须是绝对路径（以 / 开头），相对路径在子目录下会 404；另外，Web Server 需正确返回 Content-Type，比如 PNG 要是 image/png，否则部分浏览器拒载。
