如何使用JavaScript实现网站favicon动画效果？

云原生阿岚

2026-7-6

用JavaScript实现Chrome的动态Favicon

Chrome原生不支持直接显示GIF格式的favicon，所以你用<link>标签的方法不管用。要实现动态效果，得用JavaScript逐帧切换静态图片来模拟动画，步骤如下：

准备工作

先把你的GIF拆分成单独的静态帧图片（比如PNG格式），给它们按顺序命名，比如favicon-frame-0.png、favicon-frame-1.png、favicon-frame-2.png... 确保所有帧尺寸都是标准的favicon大小（一般16x16或32x32像素）。

实现代码

1. 页面里先添加基础的favicon标签

在<head>里放一个带ID的link标签，方便JS操作：

<link id="dynamic-favicon" rel="icon" type="image/png" href="favicon-frame-0.png">

2. 编写JavaScript逻辑

用定时器循环切换每个帧的地址，模拟动画效果：

// 定义帧列表和当前帧索引
const faviconFrames = [
  'favicon-frame-0.png',
  'favicon-frame-1.png',
  'favicon-frame-2.png',
  // 这里把所有帧的地址都加进去
];
let currentFrameIndex = 0;
const faviconElement = document.getElementById('dynamic-favicon');

// 设置动画帧率（比如100ms一帧，对应10FPS，根据你的GIF原帧率调整）
const frameRate = 100;

// 启动动画定时器
let faviconInterval = setInterval(() => {
  // 切换到下一帧，循环播放
  currentFrameIndex = (currentFrameIndex + 1) % faviconFrames.length;
  faviconElement.href = faviconFrames[currentFrameIndex];
}, frameRate);

// 可选：页面隐藏时暂停动画，节省性能
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    clearInterval(faviconInterval);
  } else {
    // 重新启动动画
    faviconInterval = setInterval(() => {
      currentFrameIndex = (currentFrameIndex + 1) % faviconFrames.length;
      faviconElement.href = faviconFrames[currentFrameIndex];
    }, frameRate);
  }
});