如何在 Angular 应用程序中提供 favicon.png 而不是 favicon.ico？ [复制]答案

【问题标题】：How to provide favicon.png in an Angular app instead of favicon.ico? [duplicate]如何在 Angular 应用程序中提供 favicon.png 而不是 favicon.ico？ [复制]
【发布时间】：2020-07-08 00:59:15
【问题描述】：

我创建了一个新的 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 请求只会返回来自 src/index.html 的内容。重启ng serve 没有区别。

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

【问题讨论】：

按Ctrl+F5试试。

标签： angular favicon

【解决方案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",
]

之后，取决于浏览器、操作系统版本等

重启应用
重启浏览器
清理缓存

【讨论】：

我发誓我在项目目录中对favicon 进行了文本搜索。也许它跳过了隐藏文件。谢谢！
从 Angular 6 开始，需要更改其 angular.json 而不是 angular-cli.json 的文件