如何更改Angular CLI图标

如何更改由Angular CLI设置的默认图标？

我尝试了很多事情，但是即使我删除了该图标（src文件夹中的favicon.ico），它也始终将Angular徽标显示为favicon。它仍然显示，我不知道从哪里加载。

我已用另一个图标替换了该图标，但它仍显示Angular徽标：

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

制作一个具有相同名称（favicon.png）的png图像，然后在以下文件中更改名称：

index.html：

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

angular-cli.json：

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

而且您将永远不会再看到角度默认图标。

尺寸应为32x32，如果超出此尺寸，则不会显示。

注意：这不适用于Angular 9

对于angular 9，您必须将favicon放入资产中，然后给出如下路径

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

由于您已favicon.ico物理替换了文件，因此某处必须存在缓存问题。您的浏览器中有一个缓存。按Ctrl+ 强制将其冲洗掉F5。

如果仍显示默认图标，请尝试使用具有干净缓存的其他浏览器（即，您尚未使用该浏览器访问该页面）。

清除缓存快捷键：（来源）

Windows
IE：Ctrl+ R；火狐：Ctrl+ Shift+ R; Chrome：Ctrl+ R或Ctrl+ F5或Shift+ F5。

Mac
Safari：⌘+ R; 火狐/ Chrome浏览器：⌘+ Shift+ R。

导航到文件终于为我解决了这个问题。以我为例：http：// localhost：4200 / favicon.ico

我曾尝试刷新，停止并重新启动ng serve，但是“空缓存和硬重载”没有起作用。

确保浏览器下载了新版本的收藏夹图标，并且未使用缓存的版本，您可以在收藏夹网址中添加虚拟参数：

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

我们可以更改有角度的CLI图标图标。我们必须将图标文件放在“资产”文件夹中，并在index.html中提供该路径。

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

我也为此感到挣扎，以为我在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（从任务栏，kill all instances）重新启动chrome 。

如果这对您不起作用，那么该帖子中还有很多其他好的建议。

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

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

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

index.html：

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

angular.json：

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

将favicon.ico移至您的资产，然后移至img文件夹，然后仅更改标题中的图标链接标记。当根本不显示favicon时，它对我有帮助。

在浏览器窗口中按Ctrl+F5

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

右键单击该图标，然后单击“重新加载”。每次都能工作。

对于将来的读者，如果您遇到这种情况，则您的浏览器希望使用旧的缓存图标。

跟着这些步骤：

1. 按住CTRL键，然后在浏览器中单击“刷新”按钮。
2. 按住Shift键，然后在浏览器中单击“刷新”按钮。

固定。

请按照以下步骤更改应用程序图标：

1. 在项目中添加.ico文件。
2. 转到angular.json，然后在“项目”->“建筑师”->“构建”->“选项”->“资产”中，为您的图标文件输入一个条目。请参阅favicon.ico的现有条目以了解操作方法。

3. 转到index.html并更新图标文件的路径。例如，

4. 重新启动服务器。

5. 硬刷新浏览器，一切顺利。

我玩了一段时间。事实证明，网站图标显然是由称为@scematics的节点模块处理的（至少在Angular5中如此）。

您可以在以下文件夹中更改收藏夹图标：

[YourProjectName]\node_modules\@schematics\angular\application\files\__sourcedir__

在该文件夹中应该有一个favicon.ico，即已加载的文件。我很确定这并不适用于所有人，但对我来说确实可行。

希望这会有所帮助。编码愉快！：D

对于那些需要动态添加图标的人，这里是我使用应用程序初始化程序所做的事情：

import { APP_INITIALIZER, FactoryProvider } from '@angular/core'

export function faviconInitFactory () {

 return () => {
  const link: any = document.querySelector(`link[rel*='icon']`) || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'

  if (someExpression) {
    link.href = 'url' || 'base64'
  } else {
    link.href = 'url' || 'base64'
  }

  document.getElementsByTagName('head')[ 0 ].appendChild(link)
}

}

export const FAVICON_INIT_PROVIDER: FactoryProvider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: faviconInitFactory,
  deps: []
}

只需删除src /下的fav.ico文件并添加即可。网站启动前将添加收藏夹图标

<link rel="icon" type="image/x-icon" href="#">

添加图标来源并重新启动应用程序，它将更改。

我尝试了许多这些解决方案，但未成功。适用于我的angular 5应用程序的应用程序如下：

index.html：注释掉您的链接标记

 <!-- <link rel="icon" type="image/png" href="src/assets/images/favicon.ico"> --> 

.angular-cli.json：将项目类型保留为“ .ico”

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

最后..

• 在您的项目文件夹结构中，将src内部的favicon.ico放在：（C：\ Dev \ EPS \ src）中。您不需要在资产文件夹中保存它，因为您没有引用它。

• 确保您的图标没有损坏（如果通过窗口资源管理器（也称为没有损坏的窗口图标）查看，则您的图标应该可读）

• 必须为32 x 32尺寸

确保当您使用图标图像时，它不是可操纵的扩展名，就像您下载png图像然后将其扩展名从手动更改png为一样icon。在这种情况下，您的图像将被破坏。和浏览器不明白。

我犯了这个错误，但是使用原始图标图像后，它开始工作。

1.检查index.html文件上的链接标记，使其看起来像这样。

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

2.在/ src目录中检查favicon.ico的文件名。

3.使用ng服务并刷新应用程序重新运行Angular。

4.如果未显示（或看起来像是在缓冲旧的favicon.ico文件）。尝试再次刷新favicon的路径以加载favicon.ico文件（例如，刷新yourdomain.com/favicon.ico）

我有同样的问题。

如果您使用的是Mac，则除了重新启动应用程序（当然还要更改index.html中的路径）之外，还需要清空缓存（Option+ ⌘+ E）并重新加载页面。

1. 删除现有的favicon.ico
2. 将新图标添加到src文件夹中，名称为“ favico.ico”
3. 清除浏览器中的缓存。

该图标不仅反映了浏览器缓存，还反映了它。有时尝试重新启动应用程序

以下步骤对我有用。

1. 删除默认的“ favicon.ico”文件，换一个新文件，命名为“ _favicon.ico”。

   注意：::不要保留默认名称，因为它会缓存在浏览器中，并且很难用新图标覆盖。

2. 使用新的链接标签更新index.html，即

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

3. 使用新的图标名称即“ _favicon.ico”更新.angular-cli.json。

4. 构建并启动您的应用，然后进行强制刷新Ctrl+ F5。

就像：

1. 将图标或png添加到与favicon相同的目录中
2. 编辑.angular-cli.json，在资产中删除favicon.ico将您的文件放到位
3. 编辑index.html，搜索收藏夹图标并将其放置到位
4. 再次发球

完成了

<link rel="icon" type="image/x-icon" href="assets/liana.jpg">

"assets": [

        "assets/sorry.jpg",
        "assets/liana.jpg"

  ],

这对我有用。

就我而言，问题是我的尺寸与普通尺寸不同。我有48x48 px它所期待的，32x32 px而我的扩展名是png，所以我不得不将其更改为ico

对我来说真正有效的方法是将我的收藏夹放到素材资源文件夹中，并自动出现在浏览器中。

1. 将位置更改为src文件夹内的assets文件夹。
2. 像这样更改index.html <link rel="icon" type="image/x-icon" href="assets/favicon.png">

好的，在2020年的9.1.12。我不明白为什么这个过程如此困难。我几乎跟踪了上面的所有帖子，但没有一个适合我。

这是什么DID的工作：完全删除index.html中的favicon引用。这是完全相反的直觉，但可以。您无需将其放入assets文件夹中。我尝试了所有这些方法，但不幸的是，这些建议都没有奏效。

index.html

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

angular.json

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

当我运行时ng build --prod，图标就在那里。也显示在我的实时服务器上。

删除chromes favicon缓存并重新启动Mac上的浏览器对我来说很有用。

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons

我遇到了同样的问题，并通过此处所述的方法强制刷新来解决了这个问题：

要刷新您网站的收藏夹图标，您可以强制浏览器使用链接标签和文件名上的查询字符串下载新版本。这在生产环境中特别有用，可确保您的用户获得更新。

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

我通过创建自己的.ico文件并创建资产文件夹并将文件放在那里来解决了该问题。然后更改Index.html中的链接href