动态切换网页图标

望间2022/1/13大约 1 分钟

在 Web 应用中，有时我们需要根据不同的场景或状态动态更换网页图标（Favicon）。

实现代码

function changeFavicon(iconUrl) {
  let link =
    document.querySelector("link[rel*='icon']") || document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  link.href = iconUrl; // icon图标URL

  document.getElementsByTagName("head")[0].appendChild(link);
}

代码解析

首先尝试通过document.querySelector查找文档中已存在的 favicon 链接元素
如果找不到，则创建一个新的link元素
设置link元素的type、rel和href属性
最后将link元素添加到文档的<head>中

使用方法

原生项目

在需要切换图标的地方调用这个函数，传入新图标的 URL：

// 示例：在点击按钮时切换图标
document.getElementById("theme-toggle").addEventListener("click", function () {
  const isDarkMode = document.documentElement.classList.toggle("dark-mode");
  const faviconUrl = isDarkMode ? "/favicon-dark.ico" : "/favicon-light.ico";
  changeFavicon(faviconUrl);
});

也可以根据不同的应用状态自动切换图标：

// 示例：根据网络状态切换图标
function checkNetworkStatus() {
  if (navigator.onLine) {
    changeFavicon("/favicon-online.ico");
  } else {
    changeFavicon("/favicon-offline.ico");
  }
}

// 监听网络状态变化
window.addEventListener("online", checkNetworkStatus);
window.addEventListener("offline", checkNetworkStatus);

// 初始化时检查一次
checkNetworkStatus();

Vue 项目

确保 Vue 项目中存在一个 favicon 图标文件（通常是一个 .ico 或 .png 文件）
在 App.vue 组件的 created() 生命周期钩子中，将 iconUrl 替换为 favicon 图标文件的 URL

应用场景

在用户收到新消息时，将 favicon 替换为带有未读消息数的图标
在暗黑模式和亮色模式之间切换时，使用对应的 favicon
根据用户的登录状态显示不同的 favicon
当应用进入后台运行时，将 favicon 替换为一个表示应用已暂停的图标

更新日志

2025/9/28 09:03

查看所有更新日志

38e56-🐳 chore: 重构项目于 2025/9/28