html纯标签无法实现动态图标，favicon不支持动画，浏览器仅读取.ico首帧；真正可行方案是将svg等图标嵌入dom，用css动画或js控制交互式动效。
HTML 本身不支持动态图标，所谓“HTML 动态图标”实际是靠 SVG + CSS 或 JavaScript 驱动的视觉效果，纯 HTML 标签（如 <link rel="icon">）只能指定静态 favicon。
favicon 能不能做动画？
不能。浏览器规范明确禁止 animated favicon：Chrome、Firefox、Safari 均只读取 .ico 文件的第一帧，即使你用 GIF 或 APNG 制作，也会被静止截取。部分旧版 Firefox 曾短暂支持，但早已移除。
- ✅ 正确做法：用静态
favicon.ico（16×16 / 32×32 / 48×48 多尺寸打包）或favicon.svg（现代浏览器支持，但仍是静态） - ❌ 错误尝试：往
<link rel="icon">的href指向一个不断轮询更新的 GIF URL —— 浏览器不会重载，也不渲染动画 - ⚠️ 注意：
favicon.svg可以含<animate></animate>标签，但绝大多数浏览器（包括 Chrome 120+）仍忽略 SVG 内部动画，仅渲染初始状态
想让图标“动起来”，该用什么技术？
真正可行的方案是：把图标嵌入页面 DOM（比如放在导航栏、按钮里），再用 CSS 动画或 JS 控制。本质是「可交互的 UI 元素」，不是「浏览器标签页图标」。
- ✅ 推荐组合：
SVG内联 +@keyframes+animation属性（轻量、无 JS、兼容性好） - ✅ 进阶控制：用
JavaScript监听事件（如 hover、click），切换class触发动画，或直接操作style.transform - ❌ 避免：用
<img src="icon.gif">—— GIF 动画不可控、无法响应交互、体积大、不支持 CSS 滤镜和缩放
示例（旋转齿轮 SVG 图标）：
<svg class="icon-spin" viewbox="0 0 24 24" width="24" height="24"><path d="M12 6l3.5 3.5L12 13 8.5 9.5 12 6zM12 2l3.5 3.5L12 9 8.5 5.5 12 2zM12 10l3.5 3.5L12 17 8.5 13.5 12 10zM12 18l3.5 3.5L12 24 8.5 20.5 12 18z"></path></svg><style>
.icon-spin {
animation: spin 1.2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
为什么不用 CSS `animation` 直接作用于 `` 或 ``？
因为这些标签不在文档流中，不参与渲染树，没有样式上下文，animation、transform、opacity 等属性对其完全无效。它们只是资源声明指令，不是可视节点。
- ✅ 有效目标：所有能出现在 DOM 中并被渲染的元素 ——
<svg></svg>、<i></i>（配合 icon font）、<div> 背景图等 <li>✅ 替代方案：用 <code>background-image: url(...)+background-position做雪碧图帧动画（需 JS 定时切换），但不如 SVG 灵活 - ⚠️ 性能提醒：避免在大量图标上同时启用复杂动画（如粒子效果），可能触发频繁重绘，移动端尤其敏感
真正难的不是让图标动起来，而是决定它该在什么时候动、动多快、是否响应用户意图。很多项目卡在「加了动画但显得廉价」，问题往往出在 easing 不自然、duration 过短、或和交互节奏脱节 —— 这些细节比技术实现更影响体验。
