Favicon NOT working on Edge

Question

I have a problem with this favicon I generated for a local server php project. It works fine on most browsers (Google Chrome, Mozilla Firefox and Opera) but on Microsoft Edge it doesn't work (It shows the default tab favicon).

I've tried many solutions to this problem like clearing the cache, using image format (.png) instead of icon (.ico), but nothing seemed to work.

Here are the lines of code that I've included in the HTML head:

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

Anyone had the same issue and solved it?

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

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