favicon.ico必须置于网站根目录，浏览器始终按协议+域名请求该路径；Vue项目应将图标放public/下并在index.html中手写四行link声明，禁用webpack中过时的favicon配置。
favicon.ico 路径必须相对于网站根目录，不是项目源码根目录
浏览器加载 favicon.ico 时，始终以当前网页的协议 + 域名（即网站根路径）为基准解析 href。比如访问 https://example.com/dashboard/，浏览器会尝试请求 https://example.com/favicon.ico，而不是你本地 src/assets/icon/favicon.ico 的位置。
所以直接写 href="./src/assets/icon/favicon.ico" 或 href="/src/assets/icon/favicon.ico" 必然 404。正确做法是：
- 把图标文件放到能被 Web 服务器直接映射为网站根路径的目录下
- Vue CLI 项目用
public/目录（不是旧版的static/），文件会原样复制到打包后输出的根目录 - 普通静态站点就直接放服务器根目录，然后用
href="/favicon.ico"
现代浏览器需要多格式、多尺寸声明，不能只靠一个 link
只写 在 Chrome/Firefox 新版本里可能显示异常，或在 Safari/iOS 上完全不生效。2026 年主流做法是按顺序声明四类资源：
-
—— 兼容传统 .ico（含多尺寸） -
—— 现代浏览器优先用 SVG，缩放无损 -
—— iOS 主屏图标，建议 180×180 PNG -
—— PWA 必需，定义图标集与主题色
顺序不能乱：SVG 声明必须在 .ico 之后，否则 Safari 会忽略它；apple-touch-icon 必须独立存在，不能靠 manifest 替代。
Vue 项目里别在 webpack 配置里硬塞 favicon
有些老教程教你在 webpack.dev.conf.js 或 vue.config.js 里给 HtmlWebpackPlugin 加 favicon 参数，这在 Vue CLI 4.5+ 和 Vite 中已过时且容易出错：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 该参数只影响生成的
index.html中的，但无法控制apple-touch-icon或manifest - 如果路径写成
./public/favicon.ico，实际打包后可能变成/favicon.ico，但开发服务器又没配好重定向，导致热更新时图标消失 - 更严重的是：它会覆盖你在
index.html中手动写的，造成预期外覆盖
正确姿势：删掉所有 favicon 配置项，只在 public/index.html 的 里手写四行 ，图标全放 public/ 下。
缓存和预加载干扰常导致图标“改了却看不到”
即使代码和路径全对，你仍可能遇到图标不更新的问题，原因集中在缓存链路上：
- 浏览器对
/favicon.ico缓存极强，即使 HTML 已更新，它也可能复用旧响应（HTTP status 304 或直接从内存读） - 某些 CDN 或反向代理（如 Nginx）默认缓存
favicon.ico数小时，需单独配置location = /favicon.ico { expires 1h; } - Chrome 有时会预加载
/favicon.ico（哪怕你没写），结果加载了 404 响应并缓存下来，后续即使补上图标也不显示
验证是否真生效：打开 DevTools → Network → 刷新页面 → 过滤 favicon，看每条请求的 Status 和 Response Headers 中的 Cache-Control；强制清除 favicon 缓存可访问 chrome://settings/clearBrowserData，勾选“Cached images and files”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
