图标无法在角度应用中使用

Question

这是下面的代码，用于自定义图标

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

in angular.cli

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

• 此URL有效（主菜单）：http://localhost:4200/maintenance

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

编辑：

也无法使用完整的收藏夹网址href="../src/favicon-16x16.png"

文件夹结构：

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

但是对我没有帮助。

Answer 1

根据您的意思，它正在“主菜单”上工作，而不是在“子菜单”上工作，看来您的主src文件夹称为“ / maintenance”。因此，您应该尝试将其用作基本根。

尝试：

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

Answer 2

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

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

然后是收藏夹图标为>

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

Answer 3

您正在使用相对网址。这意味着首页会将favicon的网址翻译为：http://localhost:4200/favicon-16x16.png其次是http://localhost:4200/maintenance/favicon-16x16.png。

Answer 4

您的第一个配置很好。在Internet Explorer 11中，我得到的行为与您完全相同。即使在删除缓存等之后。在FireFox中，图标也完全没有变化。没有尝试删除缓存和历史记录，因为它是我的主要浏览器。在Chrome中可以正常运行。 Yeey Chrome。

Answer 5

我有一个类似的问题，必须为favicon使用绝对路径。您可以尝试使用应用程序（或专用内容服务器/ CDN）的绝对路径。

Answer 6

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

Answer 7

考虑这样的事实，收藏夹图标总是被大量缓存。即使使用缓存清理重新加载窗口也可能对您没有帮助。尝试将获取参数添加到favicon路径，例如：

Answer 8

在资源文件夹中添加图像并在index.html中的路径下方更新

Answer 9

从@KingpinEX答案，我为普通URL和相对URL添加了单独的图标