Search code examples
internet-explorerinternet-explorer-11microsoft-edgefaviconico

Microsoft Edge and Internet Explorer are displaying incorrect favicon

I have searched stackoverflow and many other websites

Nothing seems like fixing the problem

The website link : https://www.monstermmorpg.com

The source code in header

<link rel="apple-touch-icon" sizes="57x57" href="//static.monstermmorpg.com/favicons/apple-touch-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="//static.monstermmorpg.com/favicons/apple-touch-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="//static.monstermmorpg.com/favicons/apple-touch-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="//static.monstermmorpg.com/favicons/apple-touch-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="//static.monstermmorpg.com/favicons/apple-touch-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="//static.monstermmorpg.com/favicons/apple-touch-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="//static.monstermmorpg.com/favicons/apple-touch-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="//static.monstermmorpg.com/favicons/apple-touch-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="//static.monstermmorpg.com/favicons/apple-touch-icon-180x180.png">

<link rel="icon" type="image/png" sizes="32x32" href="//static.monstermmorpg.com/favicons/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="192x192" href="//static.monstermmorpg.com/favicons/android-chrome-192x192.png">

<link rel="icon" type="image/png" sizes="16x16" href="//static.monstermmorpg.com/favicons/favicon-16x16.png">

<link rel="manifest" href="//static.monstermmorpg.com/favicons/site.webmanifest">

<link rel="mask-icon" href="//static.monstermmorpg.com/favicons/safari-pinned-tab.svg" color="#490f1e">

<link rel="shortcut icon" href="//static.monstermmorpg.com/favicons/favicon.ico">

<meta name="msapplication-TileColor" content="#00aba9">

<meta name="msapplication-config" content="//static.monstermmorpg.com/favicons/browserconfig.xml">

<meta name="theme-color" content="#272727">

It should display this favicon : https://static.monstermmorpg.com/favicons/favicon.ico

for example this is how it is seen in chrome

enter image description here

However in internet explorer, microsoft edge it is always displayed like below

How to fix?

enter image description here

Solution

  • Looks like you are having an issue with the IE 11 and MS Edge legacy browser.

    I try to visit your site and I can see the issue there.

    I suggest you add rel="icon" type="image/x-icon" and rel="shortcut icon" type="image/x-icon" attributes in your code and again test the issue.

    Example:

    <!doctype html>
<html>
<head>

<link rel="icon" type="image/x-icon" href="https://static.monstermmorpg.com/favicons/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="https://static.monstermmorpg.com/favicons/favicon.ico"/>
</head>
<body>
Hello World...
</body>
</html>

    It resolves the issue on my end and I can see the correct favicon in the IE and MS Edge browser.

    Output in the IE 11 browser:

    enter image description here

    Output in the MS Edge legacy browser:

    enter image description here

    Note:

    1. Try to clear the cache and history of the IE and Edge browser after making changes to your site.

    2. If the issue persists then try to move the favicon.ico to the root folder of your site and modify the new path in your site and again test the issue.

    Let us know about your test results.