自定义图标在 Angular 16 中不显示

Question

我是前端 Web 开发新手，我正在尝试用 Angular 制作一个网站。到目前为止，我已经使用 CLI 创建了默认的 Angular 应用程序，并使用

ng new my-app

，并且我尝试从默认的 Angular

favicon.ico

修改网站图标。

以下是我所做的更改：

<link rel="shortcut icon" sizes="16x16" href="src/favicon-16x16.png" type="image/png" />

不幸的是，尽管尝试了多种不同的方式，当我使用

ng serve

在本地提供应用程序时，Angular 仍然显示默认图标。我认为这可能是本地实例的问题，因此我尝试将其托管在 GitHub Pages 上的 {my-app}.github.io 下，但它根本没有图标。

非常感谢您的帮助，我已经尝试解决这个问题几个小时了，而且我很确定我在某个地方遗漏了一个简单的错误。

Answer 1

将您的自定义图标保存在 src/assets 中，即： my-app/src/assets/favicon-16x16.png

打开项目根目录中的 angular.json 文件。

在architect.build.options配置中找到assets部分。它应该看起来像这样：

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

如果“src/favicon.ico 不存在，则添加它。

在 src/index.html 文件中，找到图标的标签（它应该位于部分内）。

更改 href 属性，即：

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