Vue是国内流行的前端框架,新建的Vue项目默认使用Vue官方logo作为favicon,需要替换成项目专属图标。本文详解Vue项目favicon设置方法。
方法一:Vue CLI项目设置favicon
Vue CLI创建的项目结构中,public目录存放静态资源:
- 用图捷智转把logo转成favicon.ico
- 替换public/favicon.ico文件
- 如果文件名不同,修改public/index.html
- 找到<link rel="icon" href="<%= BASE_URL %>favicon.ico">
- 修改href为你的favicon路径
- 运行npm run serve即可查看效果
方法二:Vite Vue项目设置favicon
Vite创建的Vue项目更简洁:
- 把favicon.ico放在public/目录下
- 修改根目录的index.html文件
- 在中添加:<link rel="icon" href="/favicon.ico">
- 保存后刷新浏览器即可
方法三:Nuxt.js项目设置favicon
Nuxt.js是Vue的SSR框架:
- Nuxt 3:把favicon.ico放在public/目录
- 修改nuxt.config.ts配置app.head.link
- 添加rel="icon"的link配置
Vue favicon设置注意事项
- 使用BASE_URL或绝对路径,避免相对路径错误
- 打包部署后favicon路径可能变化
- 建议同时准备apple-touch-icon.png
- PWA应用需要配置manifest.json的icons字段
常见问题
设置后favicon不显示?清除浏览器缓存,或用无痕模式查看。打包后路径错误?检查vue.config.js的publicPath配置。
需要把PNG转成favicon.ico时,使用图捷智转PNG转ICO在线工具,生成标准多尺寸ICO文件。