Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Favicon not displaying in Angular 2

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.

enter image description here

my port 8425 is not there

I am not getting why its not being loaded itself

like image 230
Rohitesh Avatar asked Feb 23 '17 07:02

Rohitesh


People also ask

Why is my favicon not displaying?

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.

Where is my favicon?

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 Answers

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">
like image 67
Debojyoti Avatar answered Nov 03 '22 13:11

Debojyoti


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  ^-->
like image 1
Jai Avatar answered Nov 03 '22 13:11

Jai