HTML 本身不能修改图片颜色，必须依赖 CSS 或 JS；favicon 无法改色，只能更换文件。filter 可实时调整 PNG/SVG 色调，但需单色/透明底/高对比度图像；动态换 favicon 需预置多版本并用 JS 切换 href 与 type，且须加时间戳防缓存。
直接说结论：HTML 本身不能修改图片颜色，必须靠 CSS 或 JS 配合图像特性来实现；而网页标签页图标（favicon）根本不能“改色”，只能换文件。
用 filter 实时调整 PNG/SVG 图片色调
filter 实时调整 PNG/SVG 图片色调适用于页面内普通 <img> 或背景图，前提是图片是单色/透明底/高对比度（比如线性图标），否则效果不可控。
-
filter: hue-rotate(90deg)最常用：旋转色相，适合蓝→绿→红循环变色 -
filter: drop-shadow(#ff6b6b 0 0 0)可“染色”黑底白图：投影紧贴原图，再用overflow: hidden隐藏原图，只留投影 -
filter: invert(100%) saturate(2) brightness(0.8)组合使用时注意顺序——filter 执行是从左到右，invert放前面才有效 - 不要对 JPG 照片用
grayscale()+sepia()混搭：结果常发灰、失真，不如后端生成或用 Canvas 处理
示例（仅对纯色 SVG 图标生效）：
<img src="icon.svg" style="filter: hue-rotate(180deg) saturate(1.5);">
换 favicon 不是“改色”，是换文件路径
<link rel="icon"> 标签只加载资源，不渲染、不解析 CSS、不执行 JS 上下文。所谓“动态换色”，本质是：
立即学习“前端免费学习笔记（深入）”；
- 提前准备好多套图标：如
/icons/favicon-light.svg、/icons/favicon-dark.svg - 用 JS 替换
href和type属性，否则 MIME 类型错会导致 Safari 加载失败 - 必须加时间戳防缓存：
href="/icons/favicon-dark.svg?v=2"，尤其 iOS Safari 缓存 favicon 极顽固 -
apple-touch-icon是独立逻辑，需同步更新，否则 iPhone 书签页仍显示旧图标
常见错误：
- 给
<link>写style="color: red"→ 完全无效 - 用
document.querySelector('link[rel="icon"]').setAttribute('href', ...)却没改type→ Chrome 可能拒绝加载 SVG
需要真·自由调色？用 SVG 内联 + currentColor
currentColor
把 SVG 写进 HTML（而非 <img src="..."/>），并把路径颜色设为 fill="currentColor"，再用 CSS 控制父元素的 color：
<svg width="24" height="24" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2L2 7l10 5 10-5-10-5z"/> </svg>
svg { color: #ff5252; } → 图标立刻变红
优势：无额外请求、响应式变色、支持伪类（svg:hover { color: #2196f3; }）
限制：只适用于你可控源码的 SVG，且不能含渐变、滤镜等复杂效果；<use> 引用外部 symbol 时不继承 currentColor
favicon 的颜色切换永远绕不开「预置多版本 + JS 切路径」这个事实。哪怕你用 WebP、AVIF 或 Base64 内联，浏览器标签页渲染图标时也看不到任何 CSS 或 JS 上下文——它就是一个静态资源加载行为。最容易被忽略的，是 Safari 对 apple-touch-icon 的独立缓存策略，以及未同步更新导致的视觉不一致。
