IE favicon disappeared when navigating other page in angular application

问题

I found an issue with angular application. I have a the location provider setup to use the html5Mode true:

$locationProvider.html5Mode(true);

I noticed that the favicon is disappearing when navigating between pages. I'm using IE11 edge document mode.

Does anyone bumped into this too?

Thanks

回答1:

Thought it might be worth adding my findings here...

At first I had the exact same problem, I couldn't get the favicon to stay on the page when changing from the root home page. I tried Shaun's answer and that didn't work either so I looked online a bit more and found that in all modern browsers you are able to use PNGs as your default favicon so I tried that and it worked for me in latest Chrome, latest Firefox and IE11 via localhost and then in Edge once I published to my webserver.

I hope this helps anyone else out that was having the same issue.

回答2:

Not sure if this will work for you or not.

This code assumes you have jQuery as well as angularjs (not just jqlite). An equivalent in pure javascript would be possible (though longer).

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');

  })

});

来源：https://stackoverflow.com/questions/22982726/ie-favicon-disappeared-when-navigating-other-page-in-angular-application