可以通过 JavaScript 动态修改页面的 favicon，主要操作 元素的 href 属性，也可新增或替换整个 link 标签；需通过 querySelector 定位现有标签并更新 href，或 createElement 动态插入新 link，同时注意路径正确性、格式兼容性（推荐 PNG + ICO 兜底）、HTTPS 安全限制及 SPA 中 DOM 就绪时机。
可以通过 JavaScript 动态修改页面的 favicon，主要操作 <link rel="icon"> 元素的 href 属性，也可新增或替换整个 link 标签。
查找并更新现有 favicon link 标签
大多数页面会在 中预先定义一个 favicon link，通常带有 rel="icon" 或 rel="shortcut icon"。JavaScript 可定位该标签并修改其图标路径：
- 使用
document.querySelector('link[rel="icon"], link[rel="shortcut icon"]')获取目标元素 - 若存在，直接设置
linkElement.href = 'new-icon.ico' - 注意：路径需为绝对 URL 或相对于当前页面的正确相对路径，否则可能加载失败
动态创建新的 favicon link 标签
如果页面没有预设 favicon，或你想彻底替换（比如支持不同尺寸、格式），可新建 <link> 并插入到 ：
- 用
document.createElement('link')创建新元素 - 设置必要属性：
rel = 'icon'、type = 'image/x-icon'（.ico）或'image/png'（.png） - 指定
href指向图标资源，例如'/assets/favicon-32x32.png' - 调用
document.head.appendChild(newLink)插入生效
适配多尺寸与现代格式（如 PNG、SVG）
现代浏览器支持多种图标格式和尺寸，可通过添加多个 <link> 提升兼容性：
立即学习“Java免费学习笔记（深入）”；
- 对高分辨率屏幕，可添加
sizes="192x192"和rel="icon"的 PNG - 部分浏览器支持 SVG favicon（需确保服务端正确返回
Content-Type: image/svg+xml） - 避免仅依赖 .ico；建议至少提供 32×32 和 192×192 的 PNG 版本，并用 JS 按需切换
注意事项与常见问题
动态设置 favicon 有几点容易被忽略：
- 图标资源必须已加载或缓存，否则切换后可能短暂显示默认图标或空白
- 某些浏览器（如旧版 Safari）对非 .ico 格式支持有限，建议保留基础 .ico 作为兜底
- HTTPS 页面无法加载 HTTP 协议的图标资源，会因混合内容被阻止
- 在单页应用（SPA）中切换路由时更新 favicon，需确保 DOM 已就绪且 head 存在
