link标签是定义网页图标的唯一标准方式，现代浏览器只认rel="icon"；type属性必须明确指定mime类型，sizes仅对png/svg有效且格式须为“nxn”；favicon强缓存需通过路径变更或查询参数强制更新。
link 标签是定义网页图标（favicon）的唯一标准方式，不靠它，浏览器不会认你指定的图标——哪怕你把 favicon.ico 放在根目录，也只算“运气好”，不是可靠方案。
为什么 rel="icon" 而不是 rel="shortcut icon"
早期 IE 用 rel="shortcut icon"，但 W3C 标准只认 rel="icon"。现代浏览器（Chrome、Firefox、Safari、Edge）都优先解析 rel="icon"，遇到 rel="shortcut icon" 会降级兼容，但没必要留着。
- rel="shortcut icon" 是历史包袱，已无实际必要
- 如果同时写了两个，部分浏览器可能按顺序取第一个，造成意外交替加载
- 只保留 rel="icon" 更干净，也避免混淆服务端日志或缓存策略
type 属性到底要不要写？写什么？
type 不是可选装饰，它影响 MIME 类型校验和加载行为：
- type="image/x-icon"：对应 .ico 文件，旧版兼容性最好，但不支持透明度动画
- type="image/png"：对应 .png，现代推荐，支持 alpha 通道，高 DPI 下更清晰
- type="image/svg+xml"：对应 .svg，矢量缩放无损，但 Safari 目前不支持作为 favicon（仅支持 mask-icon）
- 不写 type 时，浏览器靠文件扩展名推测，但服务器若未正确配置 MIME（比如 .png 返回 text/plain），就会静默失败
sizes 属性只对 PNG/SVG 有效，且必须精确匹配
sizes 用于告诉浏览器“这个链接提供的是多大尺寸的图标”，但它只在 type 是 image/png 或 image/svg+xml 时被识别；对 image/x-icon 无效（.ico 文件本身可内嵌多尺寸）。
- 必须写成 sizes="32x32"，不能写 sizes="32" 或 sizes="32px"，否则被忽略
- 多个 link 可共存，浏览器按设备 DPR 和上下文自动选最匹配的（如标签页用 16×16，PWA 安装弹窗用 192×192）
- 常见组合：
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">-
<link rel="icon" type="image/svg+xml" href="/favicon.svg">（Chrome/Edge 支持，Safari 不支持）
浏览器缓存 favicon 比普通资源顽固得多
favicon 加载失败时，浏览器往往不报错，也不重试，而是沿用旧缓存甚至 fallback 到默认文档图标。常见表现：
- 换了新图标，但标签页还是旧的，连硬刷新（Ctrl+Shift+R）都不管用
- 开发者工具 Network 面板里看不到 favicon.ico 请求，说明根本没发
- 解决方法不是清整个浏览器缓存，而是针对性处理：
- 改
href路径，比如从/favicon.ico改成/favicon-v2.ico - 加查询参数强制更新：
href="/favicon.ico?v=2"（注意：某些 CDN 或代理会忽略 query string） - 用
curl -I https://yoursite.com/favicon.ico确认返回状态码是 200 且Content-Type正确
.svg，Apache 可能没开 mod_mime，这些都会让 type="image/svg+xml" 的声明形同虚设。
