Favicon Tools检测创建
React · Not updating

React favicon 不更新?这样修复

你换了文件,标签页却留着旧图标。在 React 应用里,那是浏览器在缓存 favicon,或者构建输出和 CDN 仍在从 public/ 提供之前那份副本。

先看被提供的文件,再看缓存

直接打开 /favicon.ico。如果它还显示旧图片,说明构建没接收到你的新文件:开发服务器或部署在从 public/ 提供一份陈旧副本,清浏览器缓存也没用。

如果直接 URL 是对的、标签页却不对,那就是浏览器。favicon 被缓存得很狠,而且独立于页面,所以普通刷新往往不够。

按顺序清理

  1. 1

    给 link 加版本号,或强制刷新

    把 href 改成 /favicon.ico?v=2,让浏览器把它当作新文件,然后在无痕窗口里强制刷新。

  2. 2

    重启开发服务器或重新构建

    开发服务器经常会一直提供一份缓存的 public/ 文件,直到重启。在生产环境则重新构建,让新文件落进输出。

  3. 3

    清除 CDN

    如果站点前面有 CDN,让 favicon 路径失效,边缘节点就不再分发旧字节。

React favicon 不更新:常见问题

为什么我的 React favicon 不更新?

要么是构建仍在提供旧文件(直接检查 /favicon.ico),要么是浏览器缓存了它。前者重启开发服务器或重新构建;后者给 URL 加版本号并强制刷新。

怎么强制 favicon 刷新?

给图标 href 追加一个版本查询字符串,例如 /favicon.ico?v=2,然后强制刷新或开一个无痕窗口。改变 URL 才会让浏览器去取一份新文件。

它在开发时变了,部署之后却没变。

部署在从构建或 CDN 提供一份缓存副本。确认新文件在构建输出里,再清除 CDN 上那个路径并重新打开直接 URL。

Keep going