rel="icon"是HTML5标准写法，语义清晰且现代浏览器通用；rel="shortcut icon"为IE6–10必需的历史写法，现代浏览器兼容但不推荐新项目使用。
rel="icon" 和 rel="shortcut icon" 有什么区别
浏览器对 rel 属性的解析并不完全统一，尤其在旧版本 IE 中，rel="shortcut icon" 是唯一被识别的写法；现代浏览器（Chrome、Firefox、Edge、Safari）则普遍支持更规范的 rel="icon"。两者实际效果在绝大多数场景下一致，但语义和兼容性有差异：
-
rel="icon"是 HTML5 官方标准写法，语义清晰，推荐用于新项目 -
rel="shortcut icon"是历史遗留写法，IE6–10 依赖它，但现代浏览器也向下兼容 - 不要混用或重复声明同一图标路径，否则可能触发多次请求或覆盖行为
- 若需兼顾极老环境（如内网 IE8），可保留
rel="shortcut icon"；否则单用rel="icon"即可
href 路径写错导致图标不显示的常见原因
图标不加载，90% 以上是 href 路径问题，而非格式或尺寸。关键点在于：路径必须相对于当前 HTML 文档，不是相对于站点根目录，也不是相对于 CSS 文件。
- 使用绝对路径（以
/开头）：如href="/favicon.ico"→ 解析为https://example.com/favicon.ico，要求文件真正在网站根目录 - 使用相对路径：如
href="assets/favicon.png"→ 解析为当前 HTML 所在目录下的assets/子目录，若 HTML 在/blog/post.html，则请求的是/blog/assets/favicon.png - 避免使用
../回溯过多层级，容易因部署路径变化失效 - 浏览器不会自动 fallback 到根目录的
favicon.ico，除非你没写任何<link rel="icon">标签 - 检查浏览器开发者工具 Network 面板，筛选
favicon，看请求是否 404 或 403
type 属性不是可有可无的装饰
type 属性影响浏览器是否跳过解析或误判格式，尤其在使用 PNG/SVG 时容易被忽略。
-
type="image/x-icon"：仅适用于 .ico 文件，不可用于 .png 或 .svg -
type="image/png"：必须配 .png 文件，且建议指定尺寸（通过sizes） -
type="image/svg+xml"：SVG 图标必须是静态、无脚本、无外部引用的纯 SVG，且需 HTTP 响应头包含正确 MIME 类型 - 省略
type时，浏览器会发起 HEAD 请求探测类型，增加延迟；某些 CDN 或静态托管（如 GitHub Pages）可能不返回准确 Content-Type，导致图标加载失败 - 不要写
type="image/jpg"—— JPG 没有标准 MIME 类型，应为image/jpeg，但 favicon 几乎不用 JPG
多个 link 标签共存时的优先级规则
浏览器不会随机选一个，而是按明确规则选择最匹配的图标。顺序本身不决定优先级，sizes、media、type 和设备上下文才是关键。
- 带
sizes的图标优先于不带的（例如sizes="32x32"比无 sizes 的rel="icon"更可能被桌面 Chrome 选用） - 对于高 DPR 屏幕（如 Retina），
sizes="16x16"反而可能被忽略，应提供sizes="32x32"或sizes="any"（SVG） -
media="(prefers-color-scheme: dark)"可用于暗色模式专用图标，但需确保对应图标真实存在且 type 匹配 - iOS Safari 忽略所有
sizes，只认rel="apple-touch-icon"；Android PWA 则依赖manifest.json中的 icons 数组 - 不要为同一用途（如标签页图标）重复定义多个
rel="icon"，浏览器可能取第一个，也可能取最后一个，行为不可控
