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 Edg

Answer 1

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

Answer 2

Follow these steps

1. Image name should be favicon.ico and format should be ico
2. Place the ico in "wwwroot" folder

3. ico reference in index.html should be

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

4. Edge doesn't show favicon while running from local. Deploy in webserver and try

This worked for me

Answer 3

Solution for EDGE

---

TL;DR;

Host your favicon images externally.

---

If you don't have a favicon already, you can generate them here or here.

I have uploaded my 32x32 png to imgur.com It works during local testing only if the favicon/png image is hosted !externally!, like imgur.com.

In the head of the page I set the favicon like this:

 <link href="https://i.imgur.com/xxxx32x32.png" rel="shortcut icon" type="image/x-icon">

There is no naming convention, you can name the favicon whatever you like xyz.png but I guess it has to be 32x32!

I have also setup a hosts entry pointing to my web app in IIS like:

127.0.0.1   www.your-app.com

Steps: Close the browser, wait 30 seconds and reopen it.

Enter your url either like: www.your-app.com or localhost/yourApp or localhost:xxxx/yourApp.

Try both!

Make sure you clear the cache. Hit F5. Probably you need to repeat this steps, two to three times.

It will take some time for Edge to grasp it.

This works in IIS. After that I have tested it wit IIS Express and it works there too. It doesn't matter. What matters is, you have to host the favicon externally.

For example, IE11 does not show favicons at all, no matter which site I visit. So, forget about IE11 ;-)

Answer 4

Try creating a 512x512 in PNG format. Worked for me.

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

Answer 6

It might be that your favicon is too big. According to the answer in the thread in this link should a favicon be 16 x 16 px: https://forum.yola.com/yola/topics/edge-not-displaying-favicon

In my website (loekbergman.nl) is it working and I have a 16x16px icon indeed.