如果你曾经运行过 ng new 并直接部署了你的应用，那么你可能犯了一个小错误：保留了默认的 Angular “A” 图标。在用户的浏览器标签页中，没有什么比那个红色三角形更像是一个“未完成的项目”了。到 2026 年，用户期待的是精致的体验，而这正是从为 Angular 应用配置一个清晰、高分辨率的 Favicon 开始的。

Angular 处理资产的方式与标准的静态 HTML 网站不同。由于 Angular CLI 使用 Esbuild 或 Webpack 打包应用的方式，你不能只是把文件扔进文件夹就完事了。你需要明确告诉框架如何处理你的品牌资产。让我们来看看专业的配置方法，让你的应用看起来像是出自大厂之手。

第一步：准备你的图标资产

在动代码之前，你需要一个高质量的源图像。我始终建议从 SVG 开始。为什么？因为它支持无限缩放，并且原生支持深色模式。如果你还在使用单个 16x16 的 ICO 文件，那你就落伍了。在高 DPI 屏幕上，那个小图标看起来会非常模糊。

使用 Mzu favicondl 这样的工具生成必要的尺寸。至少，你需要一个 32x32 的 PNG，一个用于 Android 的 192x192 PNG，以及一个 180x180 的 Apple Touch Icon。如果你想深入了解为什么这些尺寸很重要，可以查看我们的 SVG Favicon 指南。准备好文件后，将它们放在 src/assets/favicons/ 目录下。保持目录整洁是优秀开发者的习惯。

第二步：配置 angular.json

这是大多数开发者掉坑里的地方。如果你不在 angular.json 文件中注册你的新图标，构建过程就会忽略它们。打开 angular.json，在 build 目标下找到 assets 数组。

'assets': [
  'src/favicon.ico',
  'src/assets',
  {
    'glob': '**/*',
    'input': 'src/assets/favicons',
    'output': '/'
  }
]

通过使用上面的对象语法，我们告诉 Angular 将 favicons 文件夹中的所有内容提取出来，并放在最终构建的根目录下。这样你的 index.html 就可以直接通过 /favicon-32x32.png 引用它们，而不需要写冗长的路径。GitHub 等大型平台也采用类似的资产交付策略。

第三步：更新 index.html

现在构建系统已经知道文件在哪了，你需要告诉浏览器。打开 src/index.html。删除默认的 favicon.ico 链接，换成下面这套现代化的配置。

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='alternate icon' type='image/png' href='/favicon-32x32.png'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

使用 rel='alternate icon' 是针对不支持 SVG 的旧浏览器的聪明回退方案。如果部署后发现图标没更新，那多半是缓存问题。你可以参考我们的 如何清除 Favicon 缓存 指南来解决。

Angular 中的常见坑

一个常见的错误是忘记了 base href。如果你的 Angular 应用托管在子目录下（例如 example.com/my-app/），使用绝对路径可能会导致图标加载失败。务必使用相对路径，或者确保构建配置考虑到了子目录路径。

另外，如果你正在构建渐进式 Web 应用 (PWA)，你的 manifest.webmanifest 文件必须指向与 HTML 中定义的相同的图标文件。保持一致性对于提供原生应用般的体验至关重要。