如何在 Angular 应用中提供 favicon.png 而不是 favicon.ico？

Question

我创建了一个新的 Angular 应用程序：

ng new ...

我可以通过以下方式查看应用程序：

ng serve --open

我删除了默认的 src/favicon.ico 并将其替换为 src/favicon.png。我还打开了 src/index.html 并将相应的行更改为：

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

这似乎没有用。为 /favicon.png 发出 GET 请求只是 returns 来自 src/index.html 的内容。重新启动 ng serve 没有任何区别。

如何使应用程序可以访问此文件？

Answer 1

制作一个具有相同名称的 PNG 图像（即 favicon.png）并更改这些文件中的名称。

index.html

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

angular.json

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

在旧版本的Angular中（v.7之前），后一个文件是angular-cli.json

"assets": [
  "favicon.png" 
  "assets",
]

之后，取决于浏览器、版本OS等

How to provide favicon.png in an Angular app instead of favicon.ico?