Chrome下实现消息通知动态Favicon：红白图标500ms循环切换方案

嘿，这个需求我之前做过！Chrome确实不支持动态GIF作为favicon，但用JavaScript切换两张静态图标完全能实现你要的闪烁效果，而且逻辑很简单。

核心思路 #

用一个变量跟踪当前显示的图标状态，每隔500ms切换一次href属性，在红白图标之间循环即可。

完整代码实现 #

首先确保你的页面里有一个带id="favicon"的link标签（如果没有就先加上）：

<link id="favicon" rel="icon" type="image/png" href="_/css/img/white.png">

然后添加JavaScript逻辑：

// 初始化状态：默认显示白色图标
let isShowingRed = false;
const favicon = $('#favicon');

// 启动500ms间隔的切换定时器
setInterval(() => {
  if (isShowingRed) {
    // 切换回白色图标
    favicon.attr('href', '_/css/img/white.png');
    isShowingRed = false;
  } else {
    // 切换到红色图标
    favicon.attr('href', '_/css/img/red.png');
    isShowingRed = true;
  }
}, 500);

进阶优化：结合页面可见性（贴合你的需求） #

既然你是想在用户浏览其他标签页时触发闪烁，那可以配合页面可见性API，只在页面隐藏时启动闪烁，用户切回时恢复默认图标：

let blinkTimer;
const favicon = $('#favicon');
const whiteIcon = '_/css/img/white.png';
const redIcon = '_/css/img/red.png';

// 切换图标的函数
function toggleFavicon() {
  const currentHref = favicon.attr('href');
  favicon.attr('href', currentHref === whiteIcon ? redIcon : whiteIcon);
}

// 启动闪烁
function startBlinking() {
  blinkTimer = setInterval(toggleFavicon, 500);
}

// 停止闪烁并恢复默认图标
function stopBlinking() {
  clearInterval(blinkTimer);
  favicon.attr('href', whiteIcon);
}

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    startBlinking();
  } else {
    stopBlinking();
  }
});

注意事项 #

• 确保两张图标的尺寸一致（推荐16x16或32x32像素），避免切换时出现视觉错位
• 如果你的jQuery版本较低，确认attr方法能正常修改href（新版本也可以用prop，效果一致）
• 测试时注意：部分浏览器可能会缓存favicon，切换后如果看不到效果，可以强制刷新页面（Ctrl+F5）

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