Firefox书签中动态更新favicon失效问题求助

Firefox对书签Favicon的处理机制比较特殊：它会在页面初始加载阶段扫描<head>中的Favicon标签并缓存状态，仅修改已有<link>标签的href属性不会触发书签系统重新识别新的Favicon，这就是你遇到问题的核心原因。

可以通过以下方法解决：

方法1：移除旧标签，创建新的Favicon链接 #

直接删除初始的空href标签，重新创建并插入新的<link>元素，这样Firefox会重新识别并更新书签中的图标：

// 移除原有的空Favicon标签
const oldFavicon = document.querySelector("link[rel='shortcut icon']");
if (oldFavicon) {
  oldFavicon.remove();
}

// 创建新的Favicon元素
const newFavicon = document.createElement('link');
newFavicon.rel = 'shortcut icon';
newFavicon.href = customFaviconSrc; // 来自REST API的URL

// 插入到head中
document.head.appendChild(newFavicon);

方法2：兼容多rel属性设置 #

为了覆盖更多浏览器的识别逻辑，同时设置rel="icon"和rel="shortcut icon"：

newFavicon.setAttribute('rel', 'icon shortcut icon');

方法3：缓存 busting（可选，解决缓存残留问题） #

如果遇到Favicon缓存不更新的额外问题，可以在URL后添加时间戳参数强制浏览器获取最新资源：

const cacheBustedUrl = `${customFaviconSrc}?v=${Date.now()}`;
newFavicon.href = cacheBustedUrl;

原理说明 #

Firefox的书签系统只会在页面加载时主动扫描一次Favicon标签，动态修改已有标签的属性不会触发二次扫描。通过创建并插入新的<link>元素，相当于让浏览器重新检测到一个新的Favicon资源，进而同步更新书签中的图标。

内容的提问来源于stack exchange，提问作者Green Mint