目录
[1. 强制刷新缓存(最简单)](#1. 强制刷新缓存(最简单))
[2. 修改 favicon 引用方式(推荐)](#2. 修改 favicon 引用方式(推荐))
[3. 部分使用特定配置](#3. 部分使用特定配置)
[4. 部署相关解决](#4. 部署相关解决)
[5. 检查文件路径和名称](#5. 检查文件路径和名称)
[6. 多标签页处理](#6. 多标签页处理)
兩個環境的圖標不一樣:
本地:
綫上:
1. 强制刷新缓存(最简单)
方法一:硬刷新
Windows:
Ctrl + F5或Ctrl + Shift + RMac:
Cmd + Shift + R
方法二:清除浏览器缓存
Chrome: 开发者工具 → Network → 勾选 "Disable cache"
或者直接清除浏览器缓存数据
2. 修改 favicon 引用方式(推荐)
在 index.html 或对应的 HTML 模板文件中,给 favicon 链接添加版本号或时间戳:
原来的:

改后:
使用静态:
不会出现语法错误
能够打破浏览器缓存
html
<link rel="icon" href="/favicon.ico?v=20251120" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico?v=20251120" type="image/x-icon">
或者使用动态时间戳:(我用的這種)
html
<link rel="icon" href="/favicon.ico?t=<%= new Date().getTime() %>" type="image/x-icon">
Vite 构建环境中:使用了 EJS 模板语法
<%= %>会报错的, Vite 默认不支持这种语法。建议使用静态版本号,每次更新图标时修改版本号即可。
或者使用环境变量:
html<link rel="icon" href="/favicon.ico?v=${__APP_VERSION__}" type="image/x-icon">
javascriptimport { defineConfig, loadEnv } from 'vite' export default defineConfig(({ mode }) => { return { define: { '__APP_VERSION__': JSON.stringify(process.env.npm_package_version || '1.0.0') } } })
3. 部分使用特定配置
检查 vue.config.js
javascript
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].favicon = './public/favicon.ico'
return args
})
}
}
4. 部署相关解决
方法一:重新构建部署
bash
# 清除构建缓存
npm run build --no-cache
# 或
yarn build --no-cache
方法二:服务器配置問題
检查服务器文件覆盖情况
确认线上环境的
public目录下已成功替换为新版favicon.ico文件,文件权限需正确(通常为644)。处理CDN或代理缓存
若使用CDN(如阿里云CDN、Cloudflare),需手动刷新缓存或配置缓存规则排除favicon.ico。
某些情况下(如Nginx静态资源缓存),重启服务可立即生效。
在 nginx 或其它 web 服务器中配置 favicon 不缓存:
bash
location = /favicon.ico {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires 0;
}
然後重啓服務。
5. 检查文件路径和名称
檢查:
文件確定是在
public/favicon.ico路径文件名完全正确**(区分大小写)**
文件格式是有效的 .ico 格式
6. 多标签页处理
如果浏览器中有多个标签页打开同一网站,需要关闭所有标签页重新打开;
或者:
- 右键刷新按钮 → "清空缓存并硬性重新加载"

