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
只写 <link rel="icon" href="/favicon.ico"> 在 Chrome/Firefox 新版本里可能显示异常，或在 Safari/iOS 上完全不生效。2026 年主流做法是按顺序声明四类资源：
-
<link rel="icon" href="/favicon.ico" sizes="any">—— 兼容传统 .ico（含多尺寸） -
<link rel="icon" href="/favicon.svg" type="image/svg+xml">—— 现代浏览器优先用 SVG，缩放无损 -
<link rel="apple-touch-icon" href="/apple-touch-icon.png">—— iOS 主屏图标，建议 180×180 PNG -
<link rel="manifest" href="/site.webmanifest">—— PWA 必需，定义图标集与主题色
顺序不能乱：SVG 声明必须在 .ico 之后，否则 Safari 会忽略它；apple-touch-icon 必须独立存在，不能靠 manifest 替代。
立即学习“前端免费学习笔记（深入）”；
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
Vue 项目里别在 webpack 配置里硬塞 favicon
有些老教程教你在 webpack.dev.conf.js 或 vue.config.js 里给 HtmlWebpackPlugin 加 favicon 参数，这在 Vue CLI 4.5+ 和 Vite 中已过时且容易出错：
- 该参数只影响生成的
index.html中的<link rel="icon">，但无法控制apple-touch-icon或manifest - 如果路径写成
./public/favicon.ico，实际打包后可能变成/favicon.ico，但开发服务器又没配好重定向，导致热更新时图标消失 - 更严重的是：它会覆盖你在
index.html中手动写的<link>，造成预期外覆盖
正确姿势：删掉所有 favicon 配置项，只在 public/index.html 的 里手写四行 <link>，图标全放 public/ 下。
缓存和预加载干扰常导致图标“改了却看不到”
即使代码和路径全对，你仍可能遇到图标不更新的问题，原因集中在缓存链路上：
- 浏览器对
/favicon.ico缓存极强，即使 HTML 已更新，它也可能复用旧响应（HTTP status 304 或直接从内存读） - 某些 CDN 或反向代理（如 Nginx）默认缓存
favicon.ico数小时，需单独配置location = /favicon.ico { expires 1h; } - Chrome 有时会预加载
/favicon.ico（哪怕你没写<link>），结果加载了 404 响应并缓存下来，后续即使补上图标也不显示
验证是否真生效：打开 DevTools → Network → 刷新页面 → 过滤 favicon，看每条请求的 Status 和 Response Headers 中的 Cache-Control；强制清除 favicon 缓存可访问 chrome://settings/clearBrowserData，勾选“Cached images and files”。
