在 Angular 应用程序中导航其他页面时，IE 图标消失了答案

【问题标题】：IE favicon disappeared when navigating other page in angular application在 Angular 应用程序中导航其他页面时，IE 图标消失了
【发布时间】：2014-05-23 20:18:30
【问题描述】：

我发现 Angular 应用程序存在问题。我有一个位置提供程序设置来使用 html5Mode true：

$locationProvider.html5Mode(true);

我注意到在页面之间导航时图标消失了。我使用的是 IE11 边缘文档模式。

有没有人碰到过这个？

谢谢

【问题讨论】：

也发生在 Chrome 中，看起来像一个具有推送状态的已知错误：code.google.com/p/chromium/issues/detail?id=50298。
嗨@Bill，我的结果与您描述的结果不同。首先，它不会在 Chrome 上发生，然后在阅读了您提供的链接中的帖子后，我发现它与同一页面中特定位置的页面内的锚标记更相关 - 而且它似乎只发生在 Mac 中。最后一件事我发现这也发生在其他网站，如 FB - 导航不同页面后图标消失。
如果它也发生在 Facebook 上，AngularJS 标签是否相关？
我猜这里但是尝试 favicon.ico?def=abcdefghijklmn 这样它就不会缓存它？

标签： angularjs internet-explorer google-chrome favicon angularjs-routing

【解决方案1】：

认为可能值得在这里添加我的发现...

起初我遇到了完全相同的问题，当从根主页更改时，我无法让网站图标留在页面上。我尝试了 Shaun 的答案，但也没有用，所以我在网上多看了一下，发现在所有现代浏览器中，您都可以使用 PNG 作为默认图标，所以我尝试了一下，它在最新的 Chrome、最新的 Firefox 中对我有用和 IE11 通过 localhost，然后在我发布到我的网络服务器后在 Edge 中。

我希望这可以帮助遇到同样问题的其他人。

【讨论】：

【解决方案2】：

不确定这是否适合您。

此代码假定您拥有jQuery 和angularjs（不仅仅是jqlite）。纯 javascript 中的等价物是可能的（虽然更长）。

angular.module('app', [])
.run(function ($rootScope, $location) {

  $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

    // bug fix: reset favicon path
    var favType = "image/x-icon"
    favLink = $('link[type="' + favType + '"]').remove().attr("href");
    $('<link href="' + favLink + '" rel="shortcut icon" type="' + favType + '" />').appendTo('head');

  })

});

【讨论】：