Favicon NOT working on Edge

Solution 1:

For me the problem was that on localhost it never worked in Edge. No matter what I did. It was always fine in Chrome and Firefox. The solution was that it only worked in Edge after I deployed to the webserver.

Solution 2:

There are 2 problems in Edge. Both are avoided when deploying to a web server (that's why it started working in another answers after deploying to a web server). However, you can make it work on localhost, too.

1. Incomplete headers returned from server

It looks like for Edge the web server has to return Cache-Control header for the favicon.

E.g. this value works:

Cache-Control: public, max-age=2592000

The common web servers probably send that header automatically. However, if you have some custom solution, you have to implement it manually. E.g. in WCF:

WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "public, max-age=2592000");

2. Edge cannot access localhost because of some Windows security settings

By default, Windows store apps cannot use loopback interface. This seems to affect favicon loading, which is loaded using another means that the web page alone (so, even if the web page works, favicon does not work).

To enable loopback for Edge, run this in PowerShell as Administrator:

CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

Edge restart is not needed - after page refresh (F5), the favicon should be loaded.

To disable loopback again:

CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

The favicon will be cached in Edge, so it will be still visible.

Other info

If you use HTTPS, it looks like the certificate has to be valid (trusted) for the favicon to show.

Solution 3:

I had the same issue with Edge. I have tried a lot of workarounds, but only moving the icon from local to www server was successful. If your server is local (at localhost), try to move the icon file to a global server.

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

Solution 4:

You should change the name of your favicon.ico file. Like "myFavicon.ico".

You should also add ? at the end of your link, like so:

<link rel="icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />

Also, did you refresh the cache before testing? If not, reset the cache, or you will not see your changes.

Finally, it could also be your icon. Try using a favicon generator.

Solution 5:

for me i added id="favicon"

the whole line looks like

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