Favicon not displaying in Angular 2

Question

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

score 22 · Answer 1 · edited Oct 22 '20 at 23:10

22

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

edited Oct 22 '20 at 23:10

derloopkat

6,232
16
38
45

answered Jul 02 '18 at 16:46

Debojyoti

4,503
3
19
27

2

Step 1 was important. Misses in many other answers on this topic. – heinob Mar 25 '19 at 10:13
Thanks for the additional info about Step 1. – The Godfather Aug 22 '19 at 07:40

Jai · Answer 2 · 2017-02-23T07:48:33.313

1

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

edited Feb 23 '17 at 07:48

answered Feb 23 '17 at 07:43

Jai

74,255
12
74
103

Sorry, i dont know how it got pasted like that actually its like – Rohitesh Feb 23 '17 at 07:46
Okay! try removing the `.` which is in the href. – Jai Feb 23 '17 at 07:47
removed still not working do i need to rebuild or clear my browsing data and cache – Rohitesh Feb 23 '17 at 07:50
_rebuild_ is better option. Try with absolute path then move with root relative. – Jai Feb 23 '17 at 07:51
still da same ?? – Mad Nov 03 '17 at 07:20

Favicon not displaying in Angular 2

2 Answers2