在IE 11中，浏览器图标在导航到Angular应用程序的另一个页面时消失

Question

此问题特定于Internet Explorer。该图标在chrome中可以正常工作。我有一个与旧版应用程序一起运行的角度应用程序。当我从旧版应用程序导航到角度应用程序时，图标在Internet Explorer中按预期显示，但是当我在角度应用程序中导航时，图标消失了。

  <link rel="icon" type="image/x-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a" />

  <link rel="shortcut icon" type="image/x-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a" />

我尝试了完整路径，相对路径以及CDN，但似乎没有任何效果。

Answer 1

我遇到了这个确切的问题，这似乎为我解决了这个问题：

在您的index.html 文件中：

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

然后，您必须确保将 favicon 包含在 angular.json 文件的资产中：

"apps": [
    {
        "root": "src",
        "outDir": "dist",
        "assets": [
            "assets",
            "favicon.ico", //Right here
            "web.config",
            "environments"
        ],

最后，确保您的图标名为 favicon.ico，并且位于项目的 src 文件夹中。如果您有不同的格式，可以使用在线工具将图像转换为 .ico 文件。