如何在不刷新或切换页面的情况下更换网站Favicon？

完全可以实现，核心思路是动态修改页面中favicon对应的<link>标签的href属性，配合滚动事件监听触发切换逻辑。

实现步骤与代码示例 #

1. 添加基础favicon标签
   在HTML的<head>中添加带ID的favicon标签，方便后续JS定位修改：

<link rel="icon" id="dynamic-favicon" href="/favicon-default.ico" type="image/x-icon">

2. 编写滚动监听与切换逻辑
   通过监听window的scroll事件，判断滚动位置并切换favicon路径：

// 获取favicon元素
const favicon = document.getElementById('dynamic-favicon');
// 定义两种状态对应的favicon路径
const faviconTop = '/favicon-top.ico'; // 滚动位置<100时显示
const faviconScroll = '/favicon-scroll.ico'; // 滚动位置>100时显示

// 滚动事件处理函数
function updateFavicon() {
  // 兼容不同浏览器的滚动位置获取方式
  const scrollPos = document.body.scrollTop || document.documentElement.scrollTop;
  // 仅在需要切换时修改href，避免重复操作
  if (scrollPos < 100) {
    if (!favicon.href.includes(faviconTop)) {
      favicon.href = faviconTop;
    }
  } else {
    if (!favicon.href.includes(faviconScroll)) {
      favicon.href = faviconScroll;
    }
  }
}

// 绑定滚动事件
window.addEventListener('scroll', updateFavicon);
// 页面加载完成后触发一次，确保初始状态正确
window.addEventListener('load', updateFavicon);

注意事项 #

• 路径与缓存：确保favicon文件路径正确，若遇浏览器缓存导致切换不生效，可在路径后添加版本参数（如/favicon-top.ico?v=2）强制浏览器重新请求资源。
• 兼容性：主流浏览器（Chrome、Firefox、Edge等）均支持动态修改favicon的href属性，无需额外兼容处理。

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