favicon 在角度应用程序中不起作用答案

【问题标题】：favicon not working in angular applicationfavicon 在角度应用程序中不起作用
【发布时间】：2018-01-17 01:27:37
【问题描述】：

下面是自定义网站图标的代码

 <link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />

在 angular.cli 中

"assets": [
        "assets",
        "favicon-16x16.png"
      ],

它适用于这个 URL（主菜单）：http://localhost:4200/maintenance
但它不适用于此 URL（子菜单）：http://localhost:4200/maintenance/colors

编辑：

此外，它不适用于完整的网站图标 URL href="../src/favicon-16x16.png"

文件夹结构：

我已经尝试将所有类型的 URL 放在我的旧问题中：Different between ./ , ../ , ../../ , ~/ on file path(URL) in asp.net

但这对我没有帮助。

【问题讨论】：

如果您使用@angular/cli 生成的结构，为什么不将 src->assets->img 中生成的 favicon.ico 替换为您的自定义结构？

标签： angular url path favicon

【解决方案1】：

您正在使用相对网址。这意味着第一页将 favicon 的 url 转换为： http://localhost:4200/favicon-16x16.png 仅次于http://localhost:4200/maintenance/favicon-16x16.png。

所以更好用

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

【讨论】：

您的网站图标的真实公共网址是什么？ http://localhost:4200/src/favicon-16x16.png ?或者src 不在您项目的公共文件中？
我已经用我的文件夹结构为你更新了我的问题

【解决方案2】：

尝试将其添加到资产文件夹

"assets": [
        "assets",
        "./src/favicon-16x16.png"
      ],

然后是网站图标

<link rel="shortcut icon" sizes="16x16" href="favicon-16x16.png" type="image/png" />

【讨论】：

我已经通过硬浏览器刷新尝试了您的更改。厄运。它不工作！
@RameshRajendran 您还需要清除缓存任何组件级缓存。因为它被缓存了
我已经被@Robin 回答清除了。但它不起作用

【解决方案3】：

您的第一个配置很好。我在 Internet Explorer 11 中的行为与您完全相同。即使在删除缓存等之后。在 FireFox 中，图标根本不会改变。没有尝试删除缓存和历史记录，因为它是我的主要浏览器。在 Chrome 中它工作得很好。 Yeey Chrome。

所以我猜你正在使用 Internet Explorer，而 Internet Explorer 将它缓存在 Windows 本身中。您可以使用 Windows“磁盘清理”（我不确定我是否正确翻译）来清理此缓存。之后问题就解决了。

Link for Windows 10

TLDR 它工作得很好。这只是一个缓存问题。

【讨论】：

你能解释一下吗？什么不工作？预期行为是什么，实际行为是什么？
尝试回答后的问题是相同的行为
It's working for this URL(main menu) 和 But it's not working for this URL(Sub Menu) 并没有告诉我们太多

【解决方案4】：

根据您的说法，它在“主菜单”而不是“子菜单”上工作，看起来您的主 src 文件夹被称为“/maintenance”。所以你应该尝试使用它作为你的基本根。

试试：

<link rel="shortcut icon" sizes="16x16" href="/maintenance/favicon-16x16.png" type="image/png" />

【讨论】：

【解决方案5】：

我遇到了类似的问题，不得不为 favicon 使用绝对路径。您可以尝试使用应用程序的绝对路径（或专用的内容服务器/CDN）。

同时显示 app 文件夹下的内容会很有帮助，这样我们就可以看到 /maintenance 和 /maintenance/colors 路径是如何被解析的（它们是文件夹路径吗？角度路由？）。在任何一种情况下，绝对路径都是最简单的解决方案，因此您可以继续进行更有成效的事情。

【讨论】：

【解决方案6】：

从您的文件夹结构中可以看出，您的 angular-cli.json 位于根文件夹中，因此在所有情况下引用 favicon-16x16.png 都不会作为“favicon-16x16.png”工作，这可能是它在根站点上工作但不在子目录上工作的问题，而是像这样尝试：

"assets": [
        "assets",
        "/src/favicon-16x16.png"
      ],

在链接的 href 中添加 / 在 favicon-16x16.png 之前，看起来像：

<link rel="shortcut icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />

问题可能根本不在这里，它可能是您编写其他一些代码的方式，尝试回到代码中一些其他东西被调用的地方，看看那里是否存在一些逻辑问题，例如一些函数或需要执行的代码的某些部分根本不会被调用。（我猜你没有任何合成问题或错误，因为程序本身正在运行）

【讨论】：

【解决方案7】：

考虑到网站图标总是被大量缓存的事实。即使带有缓存清理的窗口重新加载也可能对您没有帮助。尝试在 favicon 路径中添加一个 get 参数，例如：

<link rel="icon" sizes="16x16" href="some-path/favicon-16x16.png?v=2" type="image/x-icon" />

【讨论】：

【解决方案8】：

从@KingpinEX 的回答中，我为普通 URL 和相对 URL 添加了单独的 favicon

<link rel="shortcut icon" sizes="16x16" href="/favicon-16x16.png" 
type="image/png" />
<link rel="shortcut icon" sizes="16x16" href="/maintenance/favicon-
16x16.png" type="image/png" />

在此更改之后，我进行了强制刷新。现在它按预期工作了。

【讨论】：

【解决方案9】：

在 assets 文件夹中添加图片并在 index.html 中的路径下方更新

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

【讨论】：