求助：Angular项目莫名加载默认“A”favicon.ico的来源排查

我之前也碰到过一模一样的困扰！这个默认的"A"图标其实是Angular CLI开发服务器内置的fallback资源——当它无法找到你配置的自定义favicon时，就会自动返回这个内置图标，哪怕你的项目里根本没有这个文件。结合你提到的切换WiFi、启动命令变化后问题复发的情况，给你几个亲测有效的排查方向：

• 强制清除浏览器深层缓存：普通重启浏览器可能清不掉针对特定域名/IP的缓存。试试用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或者直接在浏览器设置里清除当前站点的缓存数据。我之前就是因为切换localhost和指定IP后，浏览器把旧的fallback图标存在了不同的缓存分区里，强制刷新才解决。

• 清理Angular CLI的本地缓存：Angular CLI在开发时会生成.angular/cache文件夹缓存资源，有时候哪怕你更新了配置，旧的缓存依然会生效。先停止ng serve服务，手动删除项目根目录下的.angular/cache文件夹，然后重新启动服务，大概率能解决。

• 检查favicon的配置和路径：

  • 确认index.html里的favicon引用路径是否正确，比如如果你的图标在src/assets下，要写<link rel="icon" type="image/x-icon" href="assets/favicon.ico">，避免相对路径在不同host下解析出错；
  • 检查angular.json的assets配置项，确保你的自定义favicon被包含在内，比如：

    "assets": [
      "src/favicon.ico",
      "src/assets"
    ]
    

• 通过开发者工具排查请求来源：打开浏览器F12开发者工具，切换到Network标签，刷新页面后找到favicon.ico的请求，查看它的响应状态和来源：

  • 如果返回404，说明开发服务器没找到你的自定义图标，要检查路径和配置；
  • 如果是从缓存读取，那还是缓存的问题，需要彻底清除。

• 排查环境配置差异：有没有可能不同的启动命令（指定IP vs localhost）触发了不同的环境配置？比如angular.json里是否针对不同host设置了不同的assets路径，或者你用了环境变量来动态指定favicon？

这个问题在Angular开发者圈子里挺常见的，尤其是在切换开发环境、清理缓存不彻底的时候，不用太焦虑，按上面的步骤排查基本能解决。

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