3

In IE11: Icon shows up in home page on load but when I navigate to other pages, rendered icon is replaced by default IE icon. In Chrome: It works fine and icon is rendered on all routes.

Here are some of approaches I tried by referring to articles in Medium, stack overflow etc., which wasn’t not helpful.

I tried to keep absolute path(to test this in local), server name at different instances in index.html but it didn’t worked.

Also, I replaced base64 code of image and server url in above href attribute so it can access/locate favicon.

I added paths in assets array of angular.json file

"assets": [
   "src/assets", 
   "src/locale", 
   "src/assets/favicon32x32.png", 
   "src/assets/favicon16x16.png", 
   "src/assets/favicon32x32.ico", 
   "src/assets/favicon16x16.ico"
]

I tried to modify base url in index.html and CLI didn’t build. Also, I tried modify polyfill.ts and installed npm package.

I inspected other angular apps/website by opening in IE11(e.g., angular.io or gmail.com). here too problem exists.

Kindly please help/guide me in resolving above issue. Also, please let me know which approach should I take or refer to, to get to the solution.

Here is my html metadata inside head tag inside index.html

<!DOCTYPE html>
<script></script>
<html>
    <head>
        <base href="/" />
        <title>AB CORP</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="icon" href="/src/assets/images/favicons/favicon-16x16.ico" sizes="16x16" type="image/x-icon" media="all" />
        <link rel="icon" href="/src/assets/images/favicons/favicon-32x32.ico" sizes="32x32" type="image/x-icon" media="all" />
    </head>
    <body class="ls">
        <app>
            <div class="lf-splash">
                <div class="lf-message">Loading, please wait...</div>
                <i class="fa fa-spinner fa-spin"></i>
            </div>
        </app>
    </body>
</html>
Pradeep Kumar S Joshi
  • 31
  • 2
  • 1
    can you share your index.html code ? and have you hosted the app ? – Allabakash Nov 22 '19 at 08:52
  • I've added index.html markup in above problem description. Yes I've hosted this app on internal server. – Pradeep Kumar S Joshi Nov 24 '19 at 18:37
  • code looks fine except absolute path(though it is only for testing). Can you create a sample demo in stackblitz and try to reproduce. Else share the hosted url if it is shareable. – Allabakash Nov 25 '19 at 05:51
  • Does this answer your question? [Favicon not working in IE11; works in FF and Chrome](https://stackoverflow.com/questions/38317833/favicon-not-working-in-ie11-works-in-ff-and-chrome) – Rafael Herscovici Nov 25 '19 at 19:33
  • The only way which worked for me was load your favicon from cloud storage like s3 or blob storage and use the absolute path of URL. Remember once you implemented this, only time you need to ctrl + F5 on IE 11 . Then it will be fine – Ragavan Rajan Nov 25 '19 at 19:44

0 Answers0