直接将 favicon.ico 放入根目录并添加 即可生效，但需确保为标准 ICO 格式、路径正确（推荐绝对路径）、并清除浏览器缓存。
直接把 favicon.ico 放进项目根目录，再在 index.html 的 里加一行 就能生效——但多数人卡在路径、格式或缓存上。
确认图标文件是标准 favicon.ico 格式
浏览器只认特定尺寸和结构的 .ico 文件，不是随便一个 PNG 改后缀就行：
- 必须是 Windows ICO 格式（支持多尺寸：16×16、32×32、48×48 等）
- 推荐用在线工具如 RealFaviconGenerator 生成全套，它会输出
favicon.ico+ 其他适配标签 - 如果只放一个
favicon.png，得写成，但 iOS Safari 和旧版 IE 可能不识别
href 路径怎么写才对
路径错误是图标不显示最常见原因，关键看你的文件部署位置：
- 如果
favicon.ico和index.html在同一级（比如都在服务器根目录），就用绝对路径/favicon.ico - 如果放在
static/或assets/子目录下，比如static/favicon.ico，那 href 必须写成/static/favicon.ico（开头带/表示从根开始） - 不要写相对路径如
./favicon.ico或static/favicon.ico，页面路由变化时容易 404 - Vue CLI 或 Vite 项目默认把
public/下文件原样复制到输出目录，所以放public/favicon.ico后，href写/favicon.ico即可
改完没反应？先清这三处缓存
浏览器对 favicon 缓存极深，改了不显示大概率是缓存没清干净：
- 强制刷新页面：Windows/Linux 按
Ctrl + F5，macOS 按Cmd + Shift + R - 清空浏览器 favicon 缓存：Chrome 地址栏输入
chrome://settings/clearBrowserData→ 勾选“Cached images and files” → 清除 - 如果是本地开发服务器（如
http://localhost:8080），关掉服务再重启，避免 dev server 缓存旧资源 - 额外提醒：某些浏览器（如 Edge）会把 favicon 存在单独的数据库里，重启浏览器本身比单纯刷新更可靠
真正麻烦的不是加图标，而是图标在不同环境（HTTP/HTTPS、子路径部署、PWA、iOS 添加到主屏幕）下要适配一堆 meta 标签。如果只是静态 HTM 页面，上面三步做完基本就稳了；一旦涉及 Vue/React 构建流程或 CDN 部署，href 路径和构建插件配置就得同步调整，否则上线后图标消失没人提醒你。
