如何改变角度 CLI 图标

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

我已经尝试了很多东西，但它总是显示 Angular 标志为图标, 即使我已经删除了那个图标(在 src 文件夹中为 Favicon.ico)。现在还能看出来，我不知道是从哪里装的。

我已经用另一个图标取代了那个图标，但它仍然显示了 Angular 的标志:

<link rel="icon" type="image/x-icon" href="favicon.ico">
246159 次浏览
小开

既然您已经物理地替换了 favicon.ico文件，那么在某个地方一定存在缓存问题。浏览器中有一个缓存。通过按 Ctrl + F5迫使它冲洗。

如果默认图标仍然显示，请尝试使用另一个缓存干净的浏览器(也就是说，您还没有使用该浏览器访问该页面)。

清除缓存快捷方式: (来源)

窗户
IE: Ctrl + R; Firefox: Ctrl + Shift + R; Chrome: Ctrl + R，或 Ctrl + F5，或 Shift + F5。

麦克
Safari: ⌘ + R; Firefox/Chrome: ⌘ + Shift + R.

小开

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

返回文章页面

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

返回文章页面

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

你再也不会看到角度的默认图标了。

尺寸应该是32x32，如果超过这个它将不会显示。

注意: 这不适用于角度9

对于角9，你必须在资产内放置图标，然后给出路径如

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

小开

导航到文件终于为我修复了这个问题

我尝试过刷新、停止和再次启动 ng serve，以及“空缓存和硬重载”，都没有奏效。

小开

我当时也在纠结这个问题，以为我在 Angular 上做错了什么，但我的问题最终是 Chrome 缓存了这个图标。标准的“空缓存和硬重新加载”或重新启动浏览器对我不起作用，但 这篇文章为我指明了正确的方向。

这对我特别有效:

如果在窗口和使用铬，(exit chrome from taskbar)然后去 C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default 然后删除文件 Favicon-journal，Favicon 然后重新启动 chrome (来自任务栏 kill all instances)。

如果这对你不起作用的话，这篇文章里还有很多其他的好建议。

小开

确保当您使用图标图像它不是操纵扩展，如果你下载一个 png图像，然后手动改变其扩展从 png到 icon。在这种情况下，您的图像将会损坏。浏览器不明白。

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

小开

将 Favicon.ico 移动到您的资产，然后移动到 img 文件夹，在此之后只改变您的图标链接标签的标题。 它帮助我时，图标没有显示在所有。

小开

1. 检查 index.html 文件中的 link 标记，它应该是这样的。

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

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

3. 使用 ng 发球重新运行角度，并刷新应用。

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

小开

我们可以改变角 CLI 图标的图标。我们必须将图标文件放在“资产”文件夹中，并在 index.html 中给出路径。

< link rel = “ icon”type = “ image/x-icon”href = “ ./asset/images/afficon.png”> 这是我的工作。

小开

确保浏览器下载新版本的图标，不使用缓存版本，你可以添加一个虚拟参数到图标的网址:

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

我也有同样的问题。

如果你使用的是 Mac，你需要清空 Cache (Option + ⌘ + E) ，除了重新启动应用程序之外，还要重新加载页面(当然还要改变 index.html 中的路径)。

小开

删除 chrome 图标缓存并重新启动 Mac 上的浏览器对我来说很有效。

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

我遇到了同样的问题，通过强制刷新 给你描述的方法解决了这个问题:

要刷新站点的图标，可以强制浏览器使用 link 标记和文件名上的 query 字符串下载新版本。这在生产环境中特别有用，可以确保用户获得更新。

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />
小开
  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”)更新. angle-cli. json。

  4. 建立和启动你的应用程序，并做一个硬刷新 Ctrl + F5。

小开

简单如下:

  1. 将您的图标或 png 添加到与图标相同的目录中
  2. Edit.angle-cli. json，in asset 移除 Favicon.ico 把你的放在适当的位置
  3. 编辑 index.html，搜索图标，并把你的位置
  4. 再发球

就这么定了

小开

我玩了一会儿这个。 原来，图标显然是由一个名为@scematics 的节点模块处理的(至少在 Angular5中是这样)。

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

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

在那个文件夹中应该有一个 Favicon.ico，就是加载的那个。 我很确信这不适用于每个人，但它为我工作了。

希望这个有帮助。 编程愉快 D

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


"assets": [


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


],

这招对我很管用。

小开

我通过创建自己的系统来解决这个问题。Ico 文件，并创建了一个资产文件夹，并把文件放在那里。然后在 Index.html 中更改链接 href

小开

在我的情况下，问题是我有不同的维度与正常的一个。我有 48x48 px，而它是期望的 32x32 px和我的扩展是 png，所以我必须改变它为 ico

小开

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

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 文件并添加这个

小开

对于未来的读者，如果这种情况发生在您身上，您的浏览器希望使用旧的缓存图标。

遵循以下步骤:

  1. 按住 CTRL 键，点击浏览器中的“刷新”按钮。
  2. 按住 Shift 键，点击浏览器中的“刷新”按钮。

修好了。

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

添加您的图标和重新启动应用程序的来源，它将改变。

小开

为任何网络项目重新加载 FAVICON:

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

小开

对我来说，真正有效的方法是将我的图标放入资产文件夹，然后自动显示在浏览器中。

  1. 将位置更改为 src 文件夹中的资产文件夹。
  2. 像这样更改 index.html
小开

我尝试了许多这样的解决方案，但都不成功。 对我的角度5应用程序起作用的是以下内容:

.html: 注释掉你的链接标签

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

。角-cli。 json: 项目类型保留为“ . ico”

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

最后。

  • 在您的项目文件夹结构中，在 src ex: (C: Dev EPS src)中包含 Favicon.ico。您不需要有它在您的资产文件夹，因为您没有引用它。

  • 确保你的图标没有被破坏(你的图标应该是可读的，如果通过窗口浏览器也就是没有破坏的窗口图标)

  • 必须是32x32维
小开

对于角度6，将大小为 32x32的 favicon.png放入资产文件夹并改变 index.html中的路径，然后,

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

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

  1. 在项目中添加.ico 文件。
  2. 转到 angular.json，在“ Projects”-> “ Architect”-> “ build”-> “ options”-> “ asset”中，在这里为图标文件创建一个条目。请参考现有的 Favicon.ico 条目以了解如何做到这一点。

  3. 转到 index.html 并更新图标文件的路径。 比如说,

  4. 重启服务器。

  5. 硬刷新浏览器，你是好去。
小开

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

返回文章页面

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

返回文章页面

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

好的，这里是2020年9.1.12。我不明白为什么这个过程这么难。我几乎关注了上面的每一个帖子，但是没有一个对我有用。

工作原理是: 完全删除 index.html 中的图标引用。这完全违反直觉，但是很有效。你不需要把它放在 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时，收藏夹图标就在那里，也会显示在我的直播服务器上。

小开

编辑器(在我的例子中是 IDEA 2020.2)有时可以在 href中的图标位置添加 src/前缀。 我是说

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

而不是

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

所以在这种情况下，你应该删除这个 href的 src/部分。这为我解决了问题。

小开

如果向上翻转角度为8 + ，则必须在 angular.json 中更改

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

到

"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/"
},
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
}
]
小开 
<link rel="icon" type="image/x-icon" href="./assets/myimage.png">

单一时期

小开

按照以下步骤将图标从默认角度更改为特定于应用程序的角度。

  1. AngularJS 项目: 在 webapps 中添加图标

<link rel = "icon" type = "image/x-icon" href = "location of specifed icon inside webapps directory"> 头上的标签。

  1. 对于基于角度7/8的项目: 将图标图像添加到资产文件夹

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

这将修改指定图标的默认角度图标。


提交答案