IE favicon disappeared when navigating other page in angular application

Question

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

Hekking

Happens in Chrome as well, looks like a known bug with push state: code.google.com/p/chromium/issues/detail?id=50298. – Balbinder

Hi @Bill, I have a different results than those you described. First of all it's not happens on Chrome, then after reading the posts in the link you provided I found its more related to an anchor tag inside a page for a specific place in the same page - plus it appears to happen only in Mac. One last thing i found out that this is happens also in other website such as FB - the favicon disappears after navigating different pages. – Hekking

If it happens on Facebook too, are the AngularJS tags relevant? – Regularly

I am guessing here but try favicon.ico?def=abcdefghijklmn so it would not cache it? – Afrika

Answer 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.

Rockrose

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

  })

});

Baroque