如何在不重新加载页面的情况下触发浏览器标签页favicon重新加载

解决方案 #

你可以通过JavaScript动态操作head内的favicon关联节点，在不刷新整个页面的前提下触发浏览器重新加载favicon，实现代码如下：

function reloadFavicon() {
  // 匹配页面中所有已有的favicon关联节点
  const oldFaviconNodes = document.querySelectorAll('link[rel*="icon"]');
  // 读取原有favicon的资源地址
  const originalHref = oldFaviconNodes[0].getAttribute('href');

  // 移除所有旧的favicon节点
  oldFaviconNodes.forEach(node => node.remove());

  // 创建新的favicon节点
  const newFavicon = document.createElement('link');
  newFavicon.rel = 'icon';
  newFavicon.type = 'image/png';
  // 直接复用原有地址，不会替换favicon资源，仅触发重加载
  // 如果需要强制跳过本地缓存，可以在地址后拼接临时查询参数：newFavicon.href = `${originalHref}?temp=${Date.now()}`
  newFavicon.href = originalHref;

  // 将新节点插入页面头部
  document.head.appendChild(newFavicon);
}

调用reloadFavicon()函数即可触发favicon重新加载，不会触发页面整体刷新，也不需要修改favicon本身的资源内容。

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