如何修改Angular的标签页图标并强制项目使用当前最新代码

正确修改favicon的前提检查 #

• 打开项目根目录的angular.json，定位到projects.[你的项目名].architect.build.options.assets配置项，确认你使用的图标文件路径已经被包含在assets数组中：
  默认配置下仅包含"src/favicon.ico"，如果你使用自定义命名的favicon2.ico，需要补充该文件路径，或者直接替换默认的favicon.ico即可无需修改配置。
• 打开src/index.html，检查head区域的favicon引用标签和你实际使用的文件名一致：
  示例默认配置：<link rel="icon" type="image/x-icon" href="favicon.ico">

彻底解决旧代码缓存问题 #

你遇到的加载已删除旧代码的情况是Angular本地缓存+浏览器缓存共同导致的，按以下步骤操作即可彻底清除：

• 先停止正在运行的ng serve进程，删除项目根目录下的.angular缓存文件夹（Angular 12+版本默认将编译缓存存在这里，很多用户会忽略该目录）和dist输出目录
• 清除浏览器缓存，或者直接用无痕模式访问开发地址，避免读取到浏览器存储的旧页面资源
• 启动开发服务时添加禁用缓存参数：
  ng serve --live-reload --no-watch-cache
• 如果是上线打包，添加资源哈希参数即可完全避免用户端缓存旧资源：
  ng build --output-hashing=all
  该参数会给所有静态资源文件名加上唯一哈希值，只要代码有变动哈希就会更新，不会出现读取旧资源的情况。

favicon不显示的额外排查 #

如果按上述操作后还是不显示图标，确认你的ico文件是合法格式：不要直接修改png/jpg的后缀名为ico，用专门的格式转换工具生成标准ico文件，建议内置16x16、32x32、64x64三个常用尺寸适配不同场景。

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