rel="shortcut icon" 已被现代浏览器彻底忽略，正确写法仅 <link rel="icon" href="/favicon.ico" type="image/x-icon">；rel="stylesheet" 是加载CSS的唯一标识，误用于图标会导致解析错误且无回退。
直接说结论：rel="shortcut icon" 和 rel="stylesheet" 不能混用，也不能写在一起——它们语义完全不同，浏览器按 rel 值决定资源用途，写错一个就等于没写。
rel="shortcut icon" 已被现代浏览器彻底忽略
Chrome 90+、Firefox 84+、Safari 15+、Edge 90+ 全部不解析 rel="shortcut icon"。它不是“兼容写法”，而是 IE5–6 的私有历史产物。现在保留它，只会带来两个实际问题：
- 构建工具或 Linter 可能触发重复请求（比如同时存在
rel="shortcut icon"和rel="icon"，部分浏览器取第一个） - 干扰 PWA manifest 解析，尤其当
manifest.json里也定义了 icons 时，浏览器可能因关系混乱跳过图标加载
✅ 正确写法只有一行：<link rel="icon" href="/favicon.ico" type="image/x-icon">
rel="stylesheet" 是 CSS 加载的唯一开关
浏览器根本不看文件后缀或路径，只靠 rel="stylesheet" 这个字符串来判断“这是一个要解析并应用的样式表”。漏掉、拼错、加空格、大小写错误（比如 rel="StyleSheet"），都会导致：
立即学习“前端免费学习笔记（深入）”；
- Network 面板里看不到 CSS 请求（浏览器压根不发）
- 请求发出去了但样式不生效（浏览器当普通资源下载，不走 CSS 解析流程）
- 控制台无报错，排查难度陡增
⚠️ 注意：type="text/css" 在 HTML5 中已可省略，写了反而增加出错概率（比如多打个空格变成 type=" text/css "）
为什么不能用 rel="stylesheet" 引入图标文件
因为浏览器会把 href 指向的文件当作 CSS 文本去解析。如果文件是 favicon.ico 或 logo.svg，浏览器会尝试读取二进制内容并按 CSS 语法解析——结果必然是语法错误，且不会 fallback 到图标逻辑。
-
<link rel="stylesheet" href="/favicon.ico">→ 浏览器加载 .ico 文件，然后报 CSS 解析错误（如 "Unexpected token 0x00"） -
<link rel="stylesheet" href="/logo.svg">→ SVG XML 被当 CSS 解析，几乎必然失败 - 即使服务器返回
Content-Type: image/svg+xml，浏览器仍按rel值决定处理方式，不会自动转义
图标和 CSS 必须分开声明，且路径/类型严格匹配
一个常见误操作是：以为写个 <link rel="icon" href="style.css"> 就能同时加载图标和样式——这既不会加载图标，也不会加载 CSS。
- 图标必须用
rel="icon"+ 正确type（image/x-icon/image/png/image/svg+xml） - CSS 必须用
rel="stylesheet"，且href指向真实 CSS 文件（.css 后缀非必须，但内容必须是合法 CSS） -
sizes属性只对type="image/png"或type="image/svg+xml"有效；对type="image/x-icon"完全无效（.ico 自带多尺寸） - 换图标后不生效？大概率是 favicon 缓存作祟——硬刷新无效，得清浏览器缓存或改
href路径加版本号（如/favicon.ico?v=2）
最易被忽略的一点：服务器返回的 Content-Type 必须和 type 属性严格一致。Nginx 若没配好 .png 的 MIME 类型，返回 text/plain，哪怕 HTML 里写了 type="image/png"，图标也会静默失效。
