Vue.js 的网站图标
Vue 应用程序从 /public (Vite) 或 /public (Vue CLI) 传送静态资产。将 favicon.ico 放在那里并在 index.html 中引用它 - 开发服务器和生产构建在站点根目录中提供它。
Vite：将favicon.ico放入/public/favicon.ico中。在 <head> 内的 index.html 中添加 <link rel="icon" href="/favicon.ico">。
对于散列构建，根级别 /favicon.ico 不会获得内容散列 - 非常适合稳定的浏览器请求。
Vue CLI 使用相同的 public/ 约定。将默认的 public/favicon.ico 替换为您的多尺寸文件。
添加 PNG 和移动设备的 apple-touch-icon 链接。保持路径绝对（/apple-touch-icon.png），这样 vue-router 历史模式就不会破坏嵌套路由。
部署到 Netlify 或 Vercel 时，请确保 favicon 文件包含在 dist 输出中 - 它们会自动从 public/ 复制。
对于 vite-plugin-pwa，在 vite.config.ts — 192×192 和 512×512 PNG 条目的清单部分中声明图标。
工作原理
- 1
将图标复制到 public/
favicon.ico，apple-touch-icon.png，可选 favicon.svg。
- 2
编辑index.html
添加 <link rel="icon"> 和 apple-touch-icon 标签。
- 3
构建和部署
确认 /favicon.ico 在生产时返回 200。
立即尝试
生成 Vue 图标资源
Favicon 生成器常见问题
为什么Vue开发服务器显示Vite标志？+
替换 public/favicon.ico 并重新启动开发服务器。
SVG 图标在 Vue 中去哪里？+
public/favicon.svg 加上 index.html 中的 <link rel="icon" type="image/svg+xml" href="/favicon.svg">。
vue-router 会影响 favicon 路径吗？+
仅当您使用相对 href 时 - 始终使用根相对/路径。