chrome 110+ 支持 rel="icon" 引用 svg，但 safari 完全不支持，firefox 也不支持；必须搭配 png fallback，且 svg 的 data url 需严格 url 编码，服务器须返回正确 mime 类型 image/svg+xml。
Chrome 110+ 才支持 rel="icon" 直接引用 SVG 文件
不是所有浏览器都能把 SVG 当 favicon 用。Safari 完全不识别 rel="icon" type="image/svg+xml"，Firefox 也不支持；只有 Chrome 110+（含 Edge 110+）能正确加载并渲染。如果你的用户里有大量 Safari 用户（尤其 iOS），光写这一行是没用的。
实际使用时必须搭配 PNG fallback：
-
<link rel="icon" href="/favicon.svg" type="image/svg+xml">—— 放最前，给支持的浏览器优先选 -
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">—— 紧跟其后，覆盖其他浏览器
注意：sizes 属性对 SVG 无效，但加了也不会报错；而对 PNG 是强制要求——sizes="32x32" 中的 x 必须是英文小写字母，不能是 × 或 px。
href 写成 data URL 是绕过文件部署的临时方案
想快速验证 SVG 图标效果，又不想上传文件？可以用 data:image/svg+xml, 开头的内联写法。但必须做两件事：把 SVG 内容 URL 编码，且把 # 替换为 %23（否则 Chrome 会截断）。
错误示范：href="data:image/svg+xml,<svg>...</svg>" → 浏览器直接忽略
正确写法（推荐用 encodeURIComponent）：
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5.46%204.46...'%20fill='%23000'/%3E%3C/svg%3E">
要点：
- 原始 SVG 中的
"、、<code>>、#都要编码，但#最关键，漏掉就失效 - 不要手动拼接，用 JS 的
encodeURIComponent(svgString.replaceAll('\n', '').replaceAll('\r', ''))更可靠 - data URL 方式不适用于 PWA 安装图标或 iOS 添加到主屏幕——那些场景只认真实文件路径
SVG 作为 favicon 无法响应 CSS 变量或暗黑模式
别指望在 <link rel="icon" href="/logo.svg"> 里用 fill="currentColor" 让图标随 color 或 prefers-color-scheme 自动变色。浏览器加载 favicon 时是独立上下文，不继承页面 CSS，也不执行 SVG 内的 JS 或 <style></style> 块。
如果真需要主题切换效果，只能：
- 准备两套 SVG 文件（light.svg / dark.svg），用 JS 切换
<link>的href属性 - 但注意：这种切换只影响标签页图标，不影响 PWA 安装面板、iOS 添加到主屏幕等系统级入口——它们读的是 manifest.json 或
apple-touch-icon标签 - 更稳妥的做法是放弃 SVG favicon 的“动态”幻想，改用 PNG 多尺寸组合 + manifest.json 控制 PWA 图标
路径必须绝对，且服务器返回 200 + 正确 MIME 类型
href="/favicon.svg" 看似简单，但部署时最容易栽在这儿。相对路径（如 href="assets/favicon.svg"）在子路由下会 404；而即使路径对了，如果服务器没配 Content-Type: image/svg+xml，Chrome 110+ 也会静默拒绝加载。
验证方式很直接：
- 打开浏览器地址栏，输入完整 URL，比如
https://yoursite.com/favicon.svg - 看是否返回 200 状态码，且响应头里有
Content-Type: image/svg+xml - 如果返回 404、403 或 MIME 类型是
text/plain，那<link>就不会生效
常见坑：
- Vite 默认把
public/下文件当静态资源服务，但如果你把 SVG 放在src/里，它根本不会被输出 - Nginx/Apache 需显式配置 SVG 的 MIME 类型，否则可能返回
application/octet-stream - GitHub Pages 默认不支持 SVG MIME 类型，需用
.htaccess或构建脚本补救
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
