In IE 11 the favicon disappears on navigating to another page in Angular application

Question

The issue is specific to Internet Explorer. The favicon works fine in chrome. I have an angular application which is running alongside the legacy application. When I navigate to the angular application from legacy application the favicon appears as expected in the internet explorer, but when I navigate within the angular application the favicon disappears.

  <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" />

I have tried full path, relative path, as well as CDN but nothing seems to be working.

Answer 1

I had this exact issue and this seemed to resolve it for me:

In your index.html file:

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

Then you have to make sure you include the favicon in the assets of your angular.json file:

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

And finally, make sure that your icon is named favicon.ico, and that it is located in the src folder of your project. There are tools online to convert images into .ico files in case you have a different format.