Vue favicon 不显示？这样修复
Vue 单文件组件无法把 link 标签渲染进 head，所以 favicon 是在 index.html 里声明的：Vite 下是项目根目录，Vue CLI 下是在 public/ 内部。标签页空白，说明那个文件的标签写错了。
为什么它不是一个组件
浏览器在解析 head 时就会请求 favicon，早于 Vue 挂载任何东西。任何你从应用内部添加的东西都来得太晚，这正是图标属于静态 HTML 的原因。
那份 HTML 在哪里，取决于脚手架。create-vue（Vite）把 index.html 保留在项目根目录，并原样复制 public/。Vue CLI 把模板保留在 public/index.html 并用 EJS 处理它，所以 URL 需要一个占位符。
找到断点
- 1
直接打开 /favicon.ico
出现 404 说明文件没有在该路径上提供。如果能加载，说明文件没问题，问题出在 link 标签或缓存。
- 2
确认你用的是哪个脚手架
根目录有 index.html 就是 Vite：用 /favicon.ico。有 public/index.html 模板就是 Vue CLI：用 <%= BASE_URL %> 前缀。
- 3
别从 src 导入图标
被导入的图片会被打包并加哈希，于是 /favicon.ico 不再解析。把图标放在 public/ 里，保留原名。
Vue favicon 不显示：常见问题
为什么我的 Vue favicon 不显示？
index.html 里的 link 标签指向了文件不存在的地方，或者（在 Vue CLI 上）缺了 BASE_URL 占位符，导致路径在域名根路径处失效。直接打开 /favicon.ico，看看文件到底有没有被提供。
我能从 Vue 组件里设置 favicon 吗？
你可以用 useHead 在运行时切换它，浏览器会在加载后跟着变。但第一次请求用的是 index.html 里声明的那个，所以那里要放一个真正的默认值。
为什么我导入 favicon 之后它就消失了？
从 src 导入图片就是把它交给打包器，打包器会输出一个带哈希的文件名。于是 /favicon.ico 上再也访问不到任何东西。请把文件放进 public/。