能动态更新，但仅修改href属性无效；必须通过添加查询参数、替换整个link元素或同步更新rel="apple-touch-icon"和manifest.json等方式强制刷新缓存并适配各平台。
link标签的rel="icon"能否动态更新？
不能直接靠反复修改 <link rel="icon"> 的 href 属性来“热切换”图标——浏览器不会自动重载，尤其在 Safari 和旧版 Edge 中几乎完全失效。这不是 bug，而是规范行为：rel="icon" 资源只在页面加载时解析一次，后续 DOM 修改不触发重新 fetch 或应用。
真正生效的动态换 icon 方法
必须强制浏览器丢弃旧缓存并拉取新图标，核心是让 href 值产生“语义变化”：不仅是路径不同，还要绕过缓存判断逻辑。
- 每次更新时在图标 URL 后拼上唯一查询参数，例如
favicon.ico?v=1698765432（用时间戳）或favicon.ico?theme=dark - 确保服务器对带查询参数的请求返回正确图标（不要 302 重定向到无参地址，否则缓存仍生效）
- 用 JavaScript 替换整个
<link>元素，而非只改href：const link = document.querySelector("link[rel='icon']");<br>link.parentNode.removeChild(link);<br>const newLink = document.createElement("link");<br>newLink.rel = "icon";<br>newLink.href = "/icons/new-icon.ico?v=" + Date.now();<br>document.head.appendChild(newLink); - 注意：若页面已存在多个
<link rel="icon">，务必只保留一个，多余项可能干扰渲染
多尺寸/格式图标要一起换
现代页面常同时声明 rel="icon" 和 rel="apple-touch-icon"，或使用 .png / .svg 多格式 fallback。只换主 icon 不够，系统级快捷方式、PWA 安装面板、iOS 添加到主屏幕等场景依赖的是完整声明集合。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 动态更新时需同步操作所有相关
<link>标签，包括rel="apple-touch-icon"、rel="manifest"（如果用了 Web App Manifest） - SVG 图标支持主题色切换，但必须确保
<link href="icon.svg">中的 SVG 内联了<style></style>或通过 JS 注入变色逻辑，纯外部 SVG 不会响应 CSS 变量 - Android Chrome 使用
manifest.json中的icons字段生成安装图标，网页内 JS 换<link>对它无效——要换 PWA 图标，必须更新 manifest 文件并触发 service worker 更新
移动端和 PWA 的特殊限制
iOS Safari 对 <link rel="apple-touch-icon"> 的读取非常保守：只在页面首次加载或用户手动刷新时解析，JS 动态插入几乎无效；Android Chrome 在 PWA 安装后，桌面图标完全由 manifest.json 固定，运行时无法更改。
- 想实现深色模式图标切换？优先用 CSS 媒体查询控制 SVG 内部 fill，而不是换
href - 测试是否生效，别只看地址栏小图标——检查 iOS 添加到主屏幕后的实际图标、Android 桌面快捷方式、Windows 任务栏固定网站图标
- Chrome 117+ 支持
rel="icon"的sizes属性动态变更，但仅限于同一资源的不同尺寸声明，不能跨格式（如从 .ico 切到 .svg）
动态换 icon 看似简单，实际卡点全在缓存策略、平台差异和声明完整性上。最稳妥的做法不是“换”，而是提前预载所有变体，用 CSS 或 manifest 控制显示逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
