React · Not updating
React favicon 不更新?这样修复
你换了文件,标签页却留着旧图标。在 React 应用里,那是浏览器在缓存 favicon,或者构建输出和 CDN 仍在从 public/ 提供之前那份副本。
先看被提供的文件,再看缓存
直接打开 /favicon.ico。如果它还显示旧图片,说明构建没接收到你的新文件:开发服务器或部署在从 public/ 提供一份陈旧副本,清浏览器缓存也没用。
如果直接 URL 是对的、标签页却不对,那就是浏览器。favicon 被缓存得很狠,而且独立于页面,所以普通刷新往往不够。
按顺序清理
- 1
给 link 加版本号,或强制刷新
把 href 改成 /favicon.ico?v=2,让浏览器把它当作新文件,然后在无痕窗口里强制刷新。
- 2
重启开发服务器或重新构建
开发服务器经常会一直提供一份缓存的 public/ 文件,直到重启。在生产环境则重新构建,让新文件落进输出。
- 3
清除 CDN
如果站点前面有 CDN,让 favicon 路径失效,边缘节点就不再分发旧字节。
React favicon 不更新:常见问题
为什么我的 React favicon 不更新?
要么是构建仍在提供旧文件(直接检查 /favicon.ico),要么是浏览器缓存了它。前者重启开发服务器或重新构建;后者给 URL 加版本号并强制刷新。
怎么强制 favicon 刷新?
给图标 href 追加一个版本查询字符串,例如 /favicon.ico?v=2,然后强制刷新或开一个无痕窗口。改变 URL 才会让浏览器去取一份新文件。
它在开发时变了,部署之后却没变。
部署在从构建或 CDN 提供一份缓存副本。确认新文件在构建输出里,再清除 CDN 上那个路径并重新打开直接 URL。