动画 Favicon 与静态 ICO 备用图标

动画 Favicon 属于网站展示行为，需要在目标浏览器中验证。ImgConvert 可以用 GIF 的第一帧制作静态 ICO 备用图标，没有保留动画开关，也不会生成动画 ICO。

什么是动态 Favicon？

动态 Favicon 是在浏览器标签页中显示运动的网站图标。它不是静态图像，而是像迷你动画一样循环播放帧。

准备清晰的第一帧

选择在 16×16 或 32×32 下仍能辨认的简单标志。如果 GIF 开头为空白或淡入，请先在图片编辑器中选出合适的静态画面；本站转换器没有选帧控件。

动画设计要点

这些是使用其他编辑器设计动画的起点，不是 ICO 转换器的限制或控件。应根据实际动作调整时序，避免不必要的闪烁。

保持简单

动态 Favicon 最适合：

• 最多 2-4 帧
• 简单运动（脉冲、闪烁、旋转）
• 每帧轮廓清晰
• 慢时序（每帧 500ms+）

设计原则

创建动画

这些是使用其他编辑器设计动画的起点，不是 ICO 转换器的限制或控件。应根据实际动作调整时序，避免不必要的闪烁。

第一步：设计帧

创建 2-4 个不同的帧：

• 帧 1：基础状态
• 帧 2-3：动画高潮
• 帧 4：返回基础（如果循环）

第二步：设置正确时序

第三步：导出为 GIF

• 尺寸：32x32 或 16x16 像素
• 颜色：保持在 32 色以下以减小文件大小
• 循环：设置为无限
• 优化：最大化

生成静态 ICO 图标包

1. 打开 GIF 转 ICO，选择一张不超过 20 MB 的 GIF。
2. 从 16、32、48、64、128、256 px 中选择尺寸，初始选中 32、64、128。
3. 转换后下载并解压 icons.zip。
4. 使用独立尺寸图标，或包含全部选中尺寸的 favicon.ico。这些是同一静态画面的尺寸版本，不是动画帧。

长方形图片会等比放入方形画布，空余部分透明；源图内部的不透明背景不会被移除。需要 PNG 图标和 manifest 的网站套件时，可使用 Favicon Generator。

在网站中引用备用图标

将解压后的文件部署到网站根目录后，可在页面 head 中引用：

<link rel="icon" href="/favicon.ico">

请按实际部署位置调整路径。转换器不会替你上传网站文件或修改页面。MDN 图标文档介绍了该 HTML 声明。

确实需要动画时

保留原始动画文件。使用动画图片作为 Favicon，或用网站 JavaScript 切换图标帧，都需要另外实现。图片查看器能播放动画，不代表浏览器标签页、书签或快捷方式也能播放。请逐个测试目标浏览器，并准备清晰的静态备用图标。

网站 JavaScript 示例

网站开发者可以尝试更换现有 favicon 链接的 URL。这是独立的网站代码，上传 GIF 到本站不会自动修改网站或安装动画。每一帧都需要准备静态文件，并先设置可独立使用的静态图标。

下面的示例在页面可见时每 500 ms 切换两个 PNG 地址；页面隐藏或用户要求减少动态效果时停止。它演示更新机制，不能保证所有浏览器标签、书签或操作系统快捷方式都会播放动画。使用前应在实际目标中验证。

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

动态 Favicon 的使用场景

适当使用

• 通知 - 指示新消息/提醒
• 加载状态 - 显示正在处理
• 品牌表达 - 微妙的 Logo 动画
• 特殊活动 - 节日或促销期间

不适当使用

• 持续分散注意力 - 无休止的花哨动画
• 关键信息 - 用户可能注意不到
• 复杂动画 - 性能问题
• 主要品牌标识 - 应确保静态备用图标也可识别

性能考虑

保持帧数量适中，提醒失效后停止动画，并对比启用和关闭时的页面表现。定时器更快不代表图标更好，不要为同一个图标启动多个定时器。如果集成到组件中，应在组件销毁时清理监听器和定时器；示例是独立页面代码。

MDN 页面可见性文档介绍了示例使用的可见性信号。图标动画应作为页面内可访问状态提示的补充，因为用户可能看不到图标，辅助技术也未必会播报它。

检查结果

• 打开部署后的图标 URL，检查小尺寸效果。
• 旧图标仍出现时，检查页面图标声明和浏览器缓存。
• 动画效果与下载的静态 ICO 分别验证。

检查实际支持的浏览器和设备，包括首次访问与已有缓存的情况。分别验证第一帧、单独实现的动画、减少动态效果偏好以及从后台返回。在深浅浏览器界面中检查 16×16 和 32×32 的辨识度。动画不可靠时使用静态备用图标；体积目标属于项目预算，不是通用浏览器限制。

常见问题

多选几个 ICO 尺寸能保留动画吗？

不能。全部尺寸都来自第一帧，页面没有“保留动画”开关。

可以在这里选择其他帧吗？

不可以。先在其他编辑器中保存所需画面；保存为 PNG 后可使用 PNG 转 ICO。

为什么还显示旧图标？

确认部署的文件地址可打开，检查是否有相互竞争的图标声明，并对比新会话与缓存会话。标签图标、书签和已安装快捷方式可能使用不同素材或缓存。修改一个页面的链接，不会替换所有已保存图标。

只用 CSS 能让标签图标动起来吗？

网页内图片的 CSS 动画不会直接让浏览器标签图标播放动画。直接引用动画文件或用 JavaScript 切换地址，都是需要单独实现并验证目标浏览器行为的方案。

应该加入多少动态效果？

能表达所需状态即可，静态徽标有时更清晰。避免快速闪烁，保留可识别的静态图标，并检查减少动态效果的偏好。请按真实的小尺寸判断时序，不要只看放大预览。