动态更换 favicon 失效是因浏览器仅在首次加载时读取 link 标签，运行时修改 href 不触发重载；需通过添加唯一查询参数并重新创建 link 元素来强制刷新。
favicon 动态更换的底层限制
浏览器对 favicon 的加载和缓存有强策略：它通常只在页面首次加载或刷新时读取 <link rel="icon">，后续 JavaScript 修改 DOM 中的 href 属性**不一定触发图标重载**，尤其在 Chrome 和 Edge 中表现明显。Safari 更严格，部分版本完全忽略运行时变更。这不是代码写错，而是规范层面的保守设计——favicon 被视为“元信息”，非可交互资源。
所以直接改 document.querySelector("link[rel='icon']").href 多数情况下无效，尤其当新图标路径与旧路径同域、仅参数或时间戳不同时，浏览器可能直接复用缓存响应。
强制重载 favicon 的可行方案
核心思路是让浏览器认为这是“一个全新资源”，绕过缓存判断：
- 每次更换时生成带唯一查询参数的 URL，例如
icon-red.png?v=1715829300421（使用时间戳）或 icon-blue.png?_t=abc123（使用随机字符串）
- 必须重新创建
<link> 元素并替换旧节点，不能只改 href —— 这能触发浏览器重新解析和加载
- 确保新图标已部署且可通过该 URL 直接访问（404 会导致 fallback 到默认图标）
icon-red.png?v=1715829300421（使用时间戳）或 icon-blue.png?_t=abc123（使用随机字符串）<link> 元素并替换旧节点，不能只改 href —— 这能触发浏览器重新解析和加载示例代码：
function setFavicon(url) {
const link = document.querySelector("link[rel='icon']") || document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = url + '?v=' + Date.now(); // 强制去缓存
document.head.appendChild(link);
}
// 调用
setFavicon('/assets/favicon-yellow.png');
多尺寸与格式兼容性处理
现代浏览器支持多种尺寸和格式（.png、.ico、.svg），但动态切换时要注意：
-
.svg favicon 在 Firefox 和 Safari 中支持较好，Chrome 从 v120+ 才稳定支持；若需兼容旧版 Chrome，优先用 .png 或 .ico
- 不要依赖单个
<link> 标签覆盖所有尺寸；动态更换时建议统一用 32×32 或 64×64 的 .png，避免尺寸不匹配导致显示模糊
- 如果页面已有多个
<link rel="icon">（如不同尺寸），应先移除全部再插入新的，否则可能产生竞态
实际可用的触发场景与边界
动态 favicon 不适合高频轮播（如每秒换一次），原因很实在：
- 图标加载是网络请求，频繁触发会堆积 pending 请求，影响性能监控和 DevTools 网络面板可读性
- 用户代理不会为每次变更发通知，也无法监听“图标是否真正显示成功”，失败静默
- 最佳适用场景是状态映射：比如未读消息数变化时切红点图标、WebSocket 断连时切灰色图标、夜间模式开启时切深色 icon
.svg favicon 在 Firefox 和 Safari 中支持较好，Chrome 从 v120+ 才稳定支持；若需兼容旧版 Chrome，优先用 .png 或 .ico
<link> 标签覆盖所有尺寸；动态更换时建议统一用 32×32 或 64×64 的 .png，避免尺寸不匹配导致显示模糊<link rel="icon">（如不同尺寸），应先移除全部再插入新的，否则可能产生竞态- 图标加载是网络请求，频繁触发会堆积 pending 请求，影响性能监控和 DevTools 网络面板可读性
- 用户代理不会为每次变更发通知，也无法监听“图标是否真正显示成功”，失败静默
- 最佳适用场景是状态映射：比如未读消息数变化时切红点图标、WebSocket 断连时切灰色图标、夜间模式开启时切深色 icon
别忘了服务端图标路径要可公开访问，且注意 CORS —— 如果 favicon 从其他域名加载（比如 CDN），而页面没配好响应头，Chrome 会拒绝渲染并控制台报 Blocked loading resource from url not allowed by "Access-Control-Allow-Origin"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
