Vue项目未配置SVG却出现favicon.svg找不到错误的解决求助

可能的触发原因 #

自动生成指向/favicon.svg的<link>标签，通常来自两个场景：

• Vue CLI的默认HTML模板逻辑，会自动扫描public目录下的favicon相关文件并注入标签
• 项目集成的PWA插件（如@vue/cli-plugin-pwa）自动添加的图标配置

具体修复方案 #

方案1：手动指定自定义favicon覆盖自动注入 #

在public/index.html中手动添加自己的favicon标签，构建时会优先使用该配置，不再自动生成svg版本的引用：

<link rel="icon" href="/favicon.ico" type="image/x-icon">

确保public目录下存在对应的favicon.ico文件即可。

方案2：修改Vue CLI配置禁用自动注入 #

在vue.config.js中添加以下配置，直接关闭HTML插件的自动favicon注入逻辑：

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].favicon = false;
      return args;
    });
  }
}

方案3：调整PWA插件的图标配置（若使用了PWA） #

如果项目启用了PWA插件，在vue.config.js中显式禁用svg格式的favicon：

module.exports = {
  pwa: {
    iconPaths: {
      faviconSVG: null, // 禁用svg类型的favicon
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png'
    }
  }
}

若不需要PWA功能，可直接卸载插件：

npm uninstall @vue/cli-plugin-pwa

验证方式 #

修改配置后执行npm run build重新构建，查看生成的dist/index.html源码，确认不再出现/favicon.svg的引用标签即可。

内容的提问来源于stack exchange，提问作者user24831477