全局替换网站公司图标实现方案及相关注意事项咨询

单行代码的生效范围 #

你给出的这行代码：

Array.from(document.getElementsByClassName("old-icon")).forEach((item, ind) => item.src = 'newIcon.png')

只能在非常有限的场景下完成替换，无法覆盖全站所有旧图标，它仅能命中同时满足以下所有条件的图标：

• 图标以<img>标签的形式引入
• 该标签携带了old-icon类名
• 代码运行时，对应标签已经完成渲染、存在于当前DOM树中

额外需要考虑的影响因素 #

如果你要做全站级别的品牌图标替换，还需要覆盖以下这行代码解决不了的场景：

• 图标实现形式差异：绝大多数网站的品牌图标不会仅用<img src>实现，常见的CSS背景图、iconfont字体图标、内联SVG/SVG雪碧图、CSS伪元素插入的图标，这行代码都完全无法修改
• 动态渲染内容的替换：如果页面有懒加载模块、异步加载的组件（单页应用路由切换后的页面、滚动加载内容、弹窗抽屉等组件），代码执行时这些元素还没有插入DOM，后续出现的同类旧图标不会被自动替换
• 多场景图标适配：不同位置的品牌图标有不同的尺寸、样式要求（比如导航栏16x16小图标、页脚80x80大图标、分享预览用的200x200缩略图等），统一替换为同一张newIcon.png会出现拉伸、模糊、不符合设计规范的问题
• 静态资源缓存影响：如果新图标没有换文件名、也没加缓存戳，用户浏览器可能还会读取本地缓存的旧图标，导致就算修改了src也显示旧内容
• 非DOM场景的图标：网站的favicon、PWA桌面图标、Open Graph分享预览图标、Canvas/WebGL内渲染的图标都不属于普通DOM元素，这行JS完全无法触及
• SSR/SSG页面的体验问题：如果是服务端渲染或者静态生成的页面，首次返回的HTML里已经带了旧图标，JS替换会出现先闪一下旧图标再变成新图标的问题，用户体验很差
• 无障碍适配问题：如果旧的<img>标签的alt属性写的是旧品牌名，只替换src不修改alt会导致屏幕阅读器仍然播报旧品牌信息，不符合无障碍规范
• 低版本浏览器兼容性：非常老的浏览器不支持Array.from和箭头函数语法，会直接报错导致代码完全不执行

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