Vue3项目修改浏览器标签页favicon图标不生效该如何解决？

修复步骤 #

• 修正index.html中的图标引用路径
  你当前的路径存在两处错误：一是使用了Windows系统的反斜杠\，Web标准路径需使用正斜杠/；二是public目录下的资源引用时不需要加public前缀，Vue编译时会将public目录内容直接输出到打包产物根目录。
  将原有代码：

  <link rel='icon' href="public\img\favicon.png">
  

  修改为：

  <link rel="icon" href="/img/favicon.png" type="image/png">
  

• 替换根目录默认图标
  浏览器找不到你指定的图标时，会自动请求根路径的/favicon.ico作为兜底方案。Vue脚手架默认会在public根目录生成带Vue官方logo的favicon.ico文件，你没有修改/删除该文件的话就会一直显示默认图标，直接将这个文件替换为你的目标图标即可。
• 清理PWA残留配置
  如果你之前启用过PWA插件，即便删除了图标文件，只要vue.config.js中还有pwa相关配置项，编译时仍会自动注入默认图标配置。先卸载PWA插件：

  npm uninstall @vue/cli-plugin-pwa
  

  再打开vue.config.js，删除所有和pwa相关的配置字段。
• 清理缓存重新构建
  除了浏览器缓存，还要清理项目本地编译缓存：删除node_modules/.cache目录和旧的dist目录，之后重新执行npm run serve启动开发服务测试即可。

验证方法 #

如果修改后仍未生效，可以打开浏览器开发者工具的网络面板，筛选favicon相关请求，查看实际请求路径和返回状态，确认是路径错误还是文件不存在的问题。

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