现代浏览器只认rel="icon"，rel="shortcut icon"是IE遗留写法；主图标用<link rel="icon" href="/favicon.ico">，仅兼容IE11时才额外加rel="shortcut icon"且置于其后；严禁rel="icon shortcut"；sizes和type属性跨平台表现差异大，需按需组合；apple-touch-icon必须独立声明且href不可为空；IE及旧WebView对link标签解析脆弱，需注意格式规范与路径有效性。
rel="icon" 和 rel="shortcut icon" 到底该用哪个
现代浏览器（Chrome 90+、Firefox 84+、Safari 15+、Edge 90+）只认 rel="icon"，rel="shortcut icon" 是 IE 时代的遗留写法，Chrome 117+ 已明确降低其解析优先级，部分场景会直接跳过。
实操建议：
- 主图标一律用
<link rel="icon" href="/favicon.ico">，不要加shortcut - 仅当必须兼容 IE11 或老旧 Android WebView 时，额外加一条
<link rel="shortcut icon" href="/favicon.ico">，且必须放在rel="icon"之后（浏览器按顺序取第一个有效匹配） - 严禁写成
rel="icon shortcut"—— 这是非法空格分隔，W3C 不认可，部分 HTML 解析器会整条忽略
sizes 和 type 属性在各平台表现差异极大
sizes 和 type 不是“写了就生效”，不同平台对它们的依赖程度完全不同：
-
sizes="any"只对.ico文件有效，是告诉浏览器“这个图标可缩放适配任意尺寸”，其他格式（如.png）不识别该值 -
sizes="192x192"主要被 Android Chrome、Edge、Firefox 桌面版用于 PWA 安装图标，但 Safari 完全无视它 -
type="image/png"能帮浏览器快速跳过不支持的格式（比如旧版 IE 不支持 PNG 图标），但不加也不会报错，只是多一次 MIME 类型探测
推荐组合写法：
立即学习“前端免费学习笔记（深入）”；
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
apple-touch-icon 必须独立声明，不能省略 href
iOS Safari 完全不看 rel="icon" 标签，哪怕路径相同、尺寸够大，它也只信任 rel="apple-touch-icon"，且要求 href 属性必须存在。
- 写成
<link rel="apple-touch-icon">（无href）—— iOS 会 fallback 到默认路径/apple-touch-icon.png，但不会尝试从其他<link>中提取 - 写成
<link rel="apple-touch-icon" href="">—— 同样 fallback，不可靠 - 正确写法必须是
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">，并确保该文件真实存在、返回 200 状态码
IE 和旧版 WebView 对 link 标签的解析更脆弱
IE11 及部分 Android WebView（尤其基于旧版 Chromium 的定制内核）对 <link> 的属性顺序、空格、大小写更敏感：
- 不要写
href = "/icon.png"（等号前后有空格），应写href="/icon.png" - 避免混用大小写，如
REL="icon"或Href，统一小写最稳妥 - 某些 WebView 会忽略
type属性，但不会报错；若发现图标不加载，优先检查href路径是否 404 或跨域 - 不建议用 JS 动态插入
<link rel="icon">—— IE11 不支持运行时更新 favicon，且多数 WebView 在<head>渲染完成后不再解析新<link>
真正容易被忽略的是：iOS 和 Android 对图标的缓存策略完全不同。iOS 一旦缓存了 apple-touch-icon，换路径也不刷新；而 Android Chrome 有时会因 HTTP 缓存头缺失重复请求同一图标。上线前务必用无痕模式+硬刷新验证实际加载行为。
