I have used the below html code to display the favicon icon in my Angular 2 application
<link rel="shortcut icon" type="image/x-icon" href="./images/favicon.png" />
But, it's not displaying in any browser. I have clicked in the href link and it's referring to the correct path and opening the image properly.
Please let me know whether I am missing any other thing.
Small Update: I am using the angular with webpack and just now i have seen using the sql lite manager and found that the favicon itself is not being loaded when the application started up.
my port 8425 is not there
I am not getting why its not being loaded itself
When you add a favicon to your site, it may not show up since your browser has 'saved' your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks.
2 steps fix
Step-1 : Put the icon file inside the assets folder
In Angular application, all the user files are served from assets folder only. Though the default icon of angular app lives inside the src folder, but user's file will not be included if it's outside of assets folder.
Step-2 : Update the
<link>
element with proper attributes
<link rel="icon" type="image/x-icon" href="./assets/Images/Logo.png">
You need to remove the >
which is added just before the href
:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.png" />
<!-- here ^-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With