如何更改Angular CLI favicon

时间：2016-11-26 10:21:16

标签： angular-cli

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

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

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

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

33 个答案:

答案 0 :(得分：85)

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

的index.html：

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

角cli.json：

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

你永远不会再看到角度默认图标了。

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

答案 1 :(得分：36)

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

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

清除缓存快捷方式：（Source）

<强>窗
IE：控制 + - [R ;火狐：控制 + 移 + - [R ; Chrome： Ctrl + R ，或 Ctrl + F5 ，或 Shift + < KBD> F5

<强>苹果
Safari浏览器：⌘ + - [R ;火狐/铬：⌘ + 移 + - [R

答案 2 :(得分：33)

我也遇到了这个问题然后试试这个

  

1）重新启动应用程序，如果仍未更改

     

2）重新启动系统（我不知道它是否更好，但它   适合我）

答案 3 :(得分：29)

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

我曾尝试刷新，停止并再次启动ng serve，并且“空缓存和硬重新加载”，都没有用。

答案 4 :(得分：24)

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

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

答案 5 :(得分：9)

我也在努力解决这个问题，以为我在使用Angular做错了什么，但我的问题最终是Chrome缓存了这个图标。标准＆＃34;空缓存和硬重载＆＃34;或重新启动浏览器并不适合我，但this post指出了我正确的方向。

这特别适合我：

  

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

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

答案 6 :(得分：7)

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

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

答案 7 :(得分：6)

对于Angular 6，将大小为favicon.png的{​​{1}}放在资产文件夹中，并在32x32中更改路径。然后，

index.html

答案 8 :(得分：5)

在浏览器窗口中按 Ctrl + F5

答案 9 :(得分：5)

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

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

答案 10 :(得分：3)

将favicon.ico移至您的资源，然后移至img文件夹，之后只更改标题中的图标链接标记。 当favicon完全没有显示时，它对我很有帮助。

答案 11 :(得分：3)

对于未来的读者，如果您遇到这种情况，您的浏览器会想要使用旧的缓存图标。

请按照以下步骤操作：

  1. 按住CTRL并单击＆＃34;刷新＆＃34;浏览器中的按钮。
  2. 按住Shift并单击＆＃34;刷新＆＃34;浏览器中的按钮。

    3. 固定。

答案 12 :(得分：1)

我正在玩这个一段时间。 事实证明，favicon显然是由一个名为@scematics的节点模块处理的（至少在Angular5中）。

您可以在此文件夹中更改您的图标：

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

在该文件夹中应该有一个favicon.ico，即加载的那个。 我非常害羞这并不适用于所有人，但它对我有用。

希望这有帮助。 快乐的编码！ ：d

答案 13 :(得分：1)

好的，在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时，图标图标就在那里。也显示在我的实时服务器上。

答案 14 :(得分：0)

我遇到了同样的问题。

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

答案 15 :(得分：0)

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

单期

答案 16 :(得分：0)

如果将 angular 升级到 8+，则必须在 angular.json 中进行更改

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

到

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]

答案 17 :(得分：0)

编辑者（在我的情况下为IDEA 2020.2）有时可以在src/中的图标位置添加href前缀。 我的意思是

 <link rel="icon" ... href="src/favicon.ico">

代替

  <link rel="icon" ... href="favicon.ico">

因此，在这种情况下，您应该删除src/中的href部分。这为我解决了问题。

答案 18 :(得分：0)

确保在使用图标图片时，它不是受操纵的扩展程序，例如，如果您下载png图像，然后手动将其扩展名从png更改为icon。在这种情况下，您的图像将被损坏。浏览器不明白。

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

答案 19 :(得分：0)

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

index.html：

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

angular.json：

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

答案 20 :(得分：0)

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

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

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

  4. 重新启动服务器。

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

答案 21 :(得分：0)

1.检查index.html文件中的链接标记，它应该如下所示。

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

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

3.Rerun Angular with ng serve and refresh application。

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

答案 22 :(得分：0)

我尝试了许多这样的解决方案，但是没有成功。 适用于我的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 ex中的favicon.ico放在：（C：\ Dev \ EPS \ src）中。您不需要引用它，因为您没有引用它。

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

  • 尺寸必须为32 x 32

答案 23 :(得分：0)

真正适合我的是将我的收藏夹图标放到素材资源文件夹中，并自动出现在浏览器中。

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

答案 24 :(得分：0)

以下步骤对我有用。

  1. 删除默认＆＃34; favicon.ico＆＃34;使用具有不同名称的新文件，即＆＃34; _favicon.ico＆＃34;在我的情况下。

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

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

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

  3. 使用新图标名称更新.angular-cli.json，即＆＃34; _favicon.ico＆＃34;。

  4. Build＆amp;启动您的应用，并进行硬刷新 Ctrl + F5 。

答案 25 :(得分：0)

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

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

答案 26 :(得分：0)

对于那些需要动态添加的图标的人来说，这就是我使用app初始化程序所做的：

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文件并添加即可。将在应用开始之前添加favicon

答案 27 :(得分：0)

在我的情况下，问题是我与正常尺寸相比有不同的尺寸。我有48x48 px，而期待32x32 px而我的扩展程序是png所以我必须将其更改为ico

答案 28 :(得分：0)

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

"assets": [

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

  ],

这对我有用。

答案 29 :(得分：0)

简单易行：

  1. 将您的图标或png添加到与favicon相同的目录中
  2. 编辑.angular-cli.json，在资产中移除favicon.ico将你的地方置于其中
  3. 编辑index.html，搜索favicon并将其放置到位
  4. 再次运行服务

    5. 已经完成了

答案 30 :(得分：-1)

删除chromes favicon缓存并重新启动Mac上的浏览器为我工作。

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

答案 31 :(得分：-1)

我通过创建自己的.ico文件并创建了一个资源文件夹并将文件放在那里来解决了这个问题。然后更改了Index.html

中的链接href

答案 32 :(得分：-1)

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

  

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

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />
相关问题
最新问题