CODEWITHSUNDEEP
angularfavicon
Rohitesh
Rohitesh

Reputation: 1624

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

Upvotes: 12

Views: 11052

Answers (2)

Debojyoti
Debojyoti

Reputation: 4841

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">

Upvotes: 22

Jai
Jai

Reputation: 74738

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  ^-->

Upvotes: 1

Related Questions