图标在 angular 应用程序中不工作

Question

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

 <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

编辑：

Also it's not working with full favicon URL href="../src/favicon-16x16.png"

文件夹结构：

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

但这对我没有帮助。

Answer 1

您正在使用相对 url。这意味着第一页将 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" />

Answer 2

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

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

然后是网站图标

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

Answer 3

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

所以我猜您正在使用 Internet Explorer 并且 Internet Explorer 将其缓存存储在 Windows 本身中。您可以使用 windows "Disk cleanup" （我不确定我是否正确翻译了它）来清理这个缓存。之后问题就解决了。

Link for Windows 10

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

Answer 4

根据您所说的，它正在 "main menu" 而不是 "sub menu"，看起来您的主 src 文件夹名为“/maintenance”。所以你应该尝试使用它作为你的基本根。

尝试：

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

Answer 5

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

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

Answer 6

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

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

然后在 link 的 href 中添加 / 之前 favicon-16x16.png 所以它看起来像：

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

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

Answer 7

考虑到网站图标总是被大量缓存的事实。即使 window 重新加载缓存清理也可能无济于事。尝试向图标路径添加一个获取参数，例如：

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

Answer 8

根据@KingpinEX 的回答，我为普通 URL 和相对 URL

添加了单独的图标

<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" />

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

Answer 9

在 assets 文件夹中添加图像并在 index.html

中的路径下方更新

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

图标在 angular 应用程序中不工作

favicon not working in angular application

url

favicon

path

angular

编辑：