网站 Favicon 换了为什么还显示旧图？先查文件、尺寸、缓存和引用路径

Favicon 换了却还显示旧图，通常不是一个“再生成一次”就能解决的问题。浏览器看到的是一条链路的最后结果：源文件、尺寸资源、HTML 引用和缓存任何一层没更新，页面都可能继续显示旧版本。

旧图标先按四层拆开查

图注：旧图标问题要从源文件一路查到浏览器。

先做一个不带缓存的副本验证。把新图标文件下载到本地，确认它确实是新画面；再打开网站源代码，检查 link rel=“icon” 指向的文件名和路径。只有这两步都对，才值得继续查缓存。

第一层：文件和小尺寸轮廓

图标在大画布上看清楚，不代表缩到 16px 仍能识别。过多透明留白、细线和低对比文字会在小尺寸中消失。先用Favicon 与 App 图标生成器从有安全边距的源图重新生成，再用图片转 ICO检查多尺寸 ICO 是否真的包含目标尺寸。

生成器负责把源图变成资源包，不能替你判断品牌图形在 16px 是否清楚。把源图、生成包和最终线上文件分开命名，避免部署时把旧包误上传。

第二层：HTML 引用路径

检查页面 head 中的引用是否仍指向旧文件。例如资源包里生成了 favicon-new.ico，但页面仍写 favicon.ico，浏览器当然不会主动猜到新路径。还要检查相对路径与站点根路径的区别：子目录页面可能把相对路径解析到另一个目录。

不要只看开发环境的 Elements 面板。直接查看生产 HTML 响应，确认服务端返回的 link 标签和静态资源路径一致。

第三层：浏览器与 CDN 缓存

文件和引用都正确后，才排查缓存。先用无痕窗口或带版本参数的临时测试确认；如果新图只在自己的浏览器里不显示，通常是本地缓存或站点缓存尚未失效。生产环境是否有 CDN、缓存多久、能否主动刷新，要按你的部署系统判断，不能把生成器说成自动清缓存。

每次发布一个新文件名比反复覆盖旧文件更容易追踪，但仍要同步更新 HTML 引用。只改文件名、不改引用，结果不会变化。

工具能做什么，不能做什么

图叮可以帮助你把源图生成成 Web、PWA、iOS、Android 传统位图资源，或生成 16–256px 的多尺寸 ICO。它不能替你登录服务器、改 HTML、刷新 CDN 或清理浏览器缓存。把“生成成功”和“线上展示更新”当成两个验收节点，问题就不会反复绕圈。

最终验收时，用生产 HTML、资源响应和无痕窗口各确认一次，并保留旧资源作为回滚点。这样下次图标又要换时，你面对的是一条可追溯的发布链，而不是一张神秘的旧图。