如何更改Angular CLI favicon

Question

如何更改Angular CLI设置的默认favicon？

我尝试了很多东西,但它总是将Angular徽标显示为favicon,即使我删除了该图标(src文件夹中的favicon.ico).它仍然显示,我不知道从哪里加载.

我已将该图标替换为另一个图标,但仍显示Angular徽标:

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

Answer 1

创建一个具有相同名称(favicon.png)的png图像并更改这些文件中的名称:

index.html的:

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

角cli.json:

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

而且你永远不会再看到角度默认图标了.

大小应为32 x 32,如果超过此值则不会显示.

Answer 2

由于您已在favicon.ico物理上替换了文件,因此某处必须存在缓存问题.您的浏览器中有一个缓存.按Ctrl+键强制刷新F5.

如果仍然显示默认图标,请尝试使用干净缓存的其他浏览器(即您尚未访问具有该浏览器的页面).

清除缓存快捷键:(来源)

Windows
IE:Ctrl+ R; Firefox:Ctrl+ Shift+ R; Chrome:Ctrl+ R,或Ctrl+ F5,或Shift+ F5.

Mac
Safari:⌘+ R; Firefox/Chrome:⌘+ Shift+ R.

Answer 3

导航到文件终于为我修复了这个问题.就我而言:http:// localhost:4200/favicon.ico

我试图刷新,停止并重新开始ng serve,"清空缓存和硬重载",没有工作.

Answer 4

确保浏览器下载新版本的favicon并且不使用缓存版本,您可以向favicon网址添加虚拟参数:

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

Answer 5

我们可以更改角度CLI图标.我们必须将图标文件放在"assets"文件夹中,并在index.html中提供该路径.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> 这对我有用.

Answer 6

我也在努力解决这个问题,以为我在使用Angular做错了什么,但我的问题最终是Chrome缓存了这个图标.标准的"Empty Cache and Hard Reload"或重新启动浏览器对我来说不起作用,但这篇文章指出了我正确的方向.

这特别适合我:

如果在Windows上并使用chrome,(exit chrome from taskbar)然后转到 C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default 并删除文件Favicons-journal,Favicons然后重新启动chrome(来自任务栏kill all instances).

如果这不适合您,那么该帖子中还有很多其他好的建议.

Answer 7

对于Angular 6，将favicon.png大小32x32放入资产文件夹中，然后在中更改路径index.html。然后，

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

Answer 8

为任何 WEB 项目重新加载 FAVICON：

右键单击收藏夹图标，然后单击“重新加载”。每次都有效。

Answer 9

制作一个扩展名为 .ico 的图标图像，并将其复制并替换为 src 文件夹中的默认图标文件。

index.html：

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

angular.json：

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