Search code examples
htmlinternet-explorer-11favicon

Favicon on IE 11: Why using a url is working and relative path not?

I'm trying to make my favicon works on IE11.

After reading many tutorials, I found the solution below, adding

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

Issue is the favicon is not appearing on IE11. Weird thing is the line below makes the favicon working on Firefox and Chrome as Firefox and Chrome can see properly where is the icon.

<link rel="icon" type="image/x-icon" href="./assets/favicon_bnp.png">

However, when I change the first line to the line below, hosting the favicon on a server, the favicon is appearing on IE11, Firefox and Chrome.

<link rel="shortcut icon" href="http://www.iconj.com/ico/f/q/fqp4dvw03t.ico" type="image/x-icon" />

What I would like is to have the href use a relative path.

Except the URL, I've tried to change favicons, change paths, to no avail.

Any hints are welcomed.

Solution

  • There're some solutions about this issue:

    • Make sure the image a real ico file and put it in the root folder of your web server. Renaming a bitmap is not a real ico. I use https://favicon.io/ to generator favicon and it can work in iE.
    • Make sure the <link> tag of the ico is between the <head> and use absolute path instead of relative path.
    • Delete your temporary Internet files and clear cache of IE. If the folder with temporary files has reached its maximum, the favicon may not be used.

    For more information, you could refer to this thread and this thread and try the workarounds in them.