rel="icon"的作用是明确告知浏览器当前链接资源为网站官方图标，是识别favicon的关键标识；现代浏览器均支持该标准写法，无需使用历史兼容的shortcut icon。
rel="icon" 的作用是告诉浏览器：“这个 <link> 指向的资源，是当前网站的官方图标”。它不是可有可无的修饰，而是浏览器识别 favicon 的关键信号——没有它，哪怕 href 和 type 都对，多数浏览器也不会把它当图标加载。
为什么只写 rel="icon" 就够了，不用 rel="shortcut icon"
早期 IE6–IE10 要求写 rel="shortcut icon" 才能识别，但现在所有主流浏览器（Chrome、Firefox、Safari、Edge）都已完全支持标准的 rel="icon"。继续用 shortcut icon 不仅冗余，还可能在某些 PWA 场景下干扰 manifest 解析。
- 现代项目中，
rel="icon"是唯一推荐写法 -
rel="shortcut icon"属于历史兼容写法，仅在需支持 IE9 及更旧版本时才考虑 - 若同时存在多个
<link rel="icon">，浏览器按顺序取第一个有效项，后续会被忽略
type 属性到底要不要写？写错会怎样
type 不是必须项，但强烈建议显式声明。省略它时，浏览器会根据文件扩展名（如 .ico、.png）做 MIME 推断；一旦推断失败或不一致，图标就可能不显示。
- ICO 文件必须写
type="image/x-icon"，不能写image/vnd.microsoft.icon（部分 Safari 版本不认） - PNG 文件应写
type="image/png"，不要写成image/jpg或漏掉 - SVG 图标必须写
type="image/svg+xml"，否则 Chrome 110+ 会拒绝加载 - 如果服务器返回的 HTTP Content-Type 与
type属性冲突，Chrome 会以响应头为准，可能静默失败
图标路径 href 常见错误和调试技巧
路径写错是 favicon 不显示的最常见原因，而且往往没有控制台报错，只能靠排查。
- 优先使用绝对路径，如
href="/favicon.svg"，避免相对路径在子路由（如/blog/post）下解析为/blog/favicon.svg - 确保文件真实存在于该路径，且服务器能直接访问（例如在浏览器地址栏输入
https://yoursite.com/favicon.svg能下载或渲染） - 开发时清空 DNS 缓存 + 强制刷新（
Ctrl+Shift+R），因为 favicon 会被强缓存，改了文件也看不到效果 - 用
curl -I https://yoursite.com/favicon.ico检查 HTTP 状态码，404 或 403 会直接导致图标失效
多尺寸、多格式图标怎么共存才不打架
单个 <link rel="icon"> 只能声明一个图标，但你可以放多个，浏览器会按自身策略选择最合适的那个。
- 推荐组合：
<link rel="icon" href="/favicon.svg" type="image/svg+xml">（主用） +<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">（降级） -
sizes属性只对 PNG/GIF/JPG 有效，对 SVG 和 ICO 无效；写sizes="any"是 SVG 的合法写法 - 不要给同一个
rel="icon"同时指定多个sizes，浏览器不支持逗号分隔 - iOS Safari 不认
rel="icon"，必须额外加<link rel="apple-touch-icon" href="/apple-touch-icon.png">
真正容易被忽略的是缓存行为：favicon 一旦被加载，浏览器可能缓存数天甚至数周，连硬刷新都不触发重新请求。上线新图标后，最稳妥的做法是改文件名（比如从 favicon.png 改成 favicon-v2.png）并更新所有 href，而不是指望清缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
