How to change Angular CLI favicon

Question

How can I change the default favicon that is set by the Angular CLI?

I have tried many things, but it always shows the Angular logo as the favicon, even though I have deleted that icon (favicon.ico in src folder). It still shows, and I don't know from where it's loaded from.

I have replaced that icon with another icon, but it still show the Angular logo:

<link rel="icon" type="image/x-icon" href="favicon.ico">

Possible duplicate of [How do I force a favicon refresh](http://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh) — Matsemann, May 07 '17 at 11:29
Running app with different port solves the problem. example: `ng s --port 4201` — Sajad, May 24 '18 at 09:43
I am having same issue. In my case locally everything is good but when I deploy to server I get 500 internal server error... — Ziggler, Aug 08 '18 at 22:17
I read all the answer which helped me a little bit but honestly that should not be so complicated for a so basic need: just a path to copy image to ,then possibly a config file, then a restart. the "refresh" answer are not helping. — pdem, Nov 07 '19 at 08:42
A favicon is a static file that is specially configured in angular.json , just let the default and see here how it works :https://stackoverflow.com/questions/40424907/whats-the-default-path-for-static-files-in-angular2 — pdem, Nov 07 '19 at 08:52

score 269 · Answer 1 · edited May 15 '20 at 13:02

269

Make a png image with same name (favicon.png) and change the name in these files:

index.html:

<link rel="icon" type="image/x-icon" href="favicon.png" />

angular-cli.json:

"assets": [
    "assets",
    "favicon.png" 
],

And you will never see the angular default icon again.

Size should be 32x32, if more than this it will not display.

NOTE: This will not work with Angular 9

For angular 9 you have to put favicon inside assets then give path like

<link rel="icon" type="image/x-icon" href="assets/favicon.png">

edited May 15 '20 at 13:02

Guillaume

21,685
6
63
95

answered Apr 07 '17 at 12:02

Sukhveer Singh

2,847
2
10
12

3

Thank you Sukhveer. This works perfectly, It just take restarting the app after adding the icon in `angular-cli.json` file. – Ajay Sivan May 07 '17 at 16:03
2

This should be accepted answer! Nothing worked but this trick did! Thank you Sukhveer Singh! – Junia Montana Mar 12 '19 at 21:00
I also had to change the png path `` – Dude Pascalou Jan 29 '20 at 13:06
Worked in Angular 9. :) – Naveen Kumar V Aug 23 '20 at 17:02
In Angular 10 it is not working.Is something to be changed in angular 10 – NAGASREE Sep 18 '20 at 07:58
1

just follow it will work – Sukhveer Singh Sep 18 '20 at 13:10
DIDN'T WORK UNTIL CLEARED A CACHE OF THE WEBSITE (browser prefferences) – J A S K I E R Nov 05 '20 at 19:43
Suggest you use the website https://realfavicongenerator.net/ to create all your favicon. It also creates all the code etc – JimbobTheSailor Jul 26 '23 at 03:00

score 78 · Answer 2 · edited Nov 22 '17 at 04:01

78

Since you have replaced the favicon.ico file physically, there must be a caching issue somewhere. There is a cache in your browser. Force it to get flushed by pressing Ctrl+F5.

If the default icon is still displayed, try another browser with a clean cache (i.e. you haven't visited the page with that browser yet).

Clear Cache Shortcuts: (Source)

Windows
IE:Ctrl+R; Firefox:Ctrl+Shift+R; Chrome:Ctrl+R, or Ctrl+F5, or Shift+F5.

Mac
Safari:⌘+R; Firefox/Chrome:⌘+Shift+R.

edited Nov 22 '17 at 04:01

robinCTS

5,746
14
30
37

answered Nov 26 '16 at 19:12

Yuri

4,254
1
29
46

1

thanks man worked instantly - CTRL F5 for the win - worked with Angular 6 with favicon in same dir as index.html and this line in index.html ... – danday74 Aug 13 '18 at 06:49
the shortcuts are amazing ! – Gerardo Bautista Oct 10 '19 at 23:05
This solution is the best – Trash Can Aug 08 '20 at 20:55
hard reload web support well. This is just cache – Neo_ Oct 30 '21 at 02:06
Ctrl+F5 worked in Chrome. Thank you. – Pratibha Dec 30 '21 at 16:17

score 39 · Answer 3 · answered May 06 '17 at 08:13

39

Navigating to the file finally fixed this for me. In my case: http://localhost:4200/favicon.ico

I had tried to refresh, stop and start ng serve again, and "Empty Cache and Hard Reload", none worked.

answered May 06 '17 at 08:13

Chau Nguyen

894
8
13

1

That is the only answer that worked for me. Thanks for that! – Ivan Oct 18 '17 at 12:15
2

After navigating to the favicon, I reloaded the home page and hit ctrl + f5 (chrome) - this then worked. Cheers. – blueprintchris May 01 '18 at 12:02
1

this is the only thing worked for me. unbelievable! – JumpIntoTheWater Feb 24 '20 at 15:19
I tried all of it too. Nothing worked for me. Even navigating to the icon url. – Артур Гудиев Sep 22 '20 at 08:19

score 34 · Answer 4 · answered Oct 23 '17 at 19:35

34

The ensure the browser downloads a new version of the favicon and does not use a cached version you can add a dummy parameter to the favicon url:

<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">

answered Oct 23 '17 at 19:35

Tobi

2,001
2
27
49

Worked for me Thanks – charan Mar 28 '18 at 14:16
Thanks ...?any=param help to remove the cached previous icon – ArunDhwaj IIITH May 17 '18 at 15:02
this is the only thing that worked for me. Not the ctrl+f5, nor all the other guess answers, this is the thing that is working! – saferJo Feb 06 '20 at 09:54

score 21 · Answer 5 · answered Sep 29 '17 at 07:03

21

we can change angular CLI favicon icon. we have to put icon file in "assets" folder and give that path in index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> It's work for me.

answered Sep 29 '17 at 07:03

jaimin patel

209
2
3

Yup, nothing else worked for me here, but sticking it in the assets folder worked perfectly. Cheers. – scohe001 Apr 13 '20 at 01:11
Same. This is the only solution that worked! – Leponzo Oct 22 '21 at 02:57

score 13 · Answer 6 · edited Nov 05 '18 at 21:14

13

For Angular 6, put favicon.png of size 32x32 in the asset folder and change the path in index.html. Then,

<link rel="icon" type="image/x-icon" href="./assets/favicon.png">

edited Nov 05 '18 at 21:14

pvy4917

1,768
17
23

answered Nov 05 '18 at 19:38

user1795667

423
4
11

1

Indeed : I had to put mine in the assets folder and change the path in the index.html and in the angular.json file. – G. Delvigne May 17 '19 at 10:17
the dot for the relative route in href="./assets/favicon.png" was the key. Thanks – Tito Leiva May 16 '22 at 09:48

score 10 · Answer 7 · edited Jun 11 '17 at 07:14

I was struggling with this as well, thinking I was doing something wrong with Angular, but my issue ended up being Chrome caching the icon. The standard "Empty Cache and Hard Reload" or restarting the browser weren't working for me, but this post pointed me in the right direction.

This specifically worked for me:

If on windows and using chrome, (exit chrome from taskbar) then go to C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default and delete the files Favicons-journal, Favicons then re-start chrome (from the taskbar, kill all instances).

There are lots of other good suggestions in that post if this doesn't work for you.

This will also remove icons for any existing bookmarked pages, until you next visit the page. This did the trick for me though. — David B, Apr 13 '18 at 09:23

score 7 · Answer 8 · answered Oct 16 '19 at 16:31

Make a icon image with the extension .ico and copy and replace it with default favicon file in src folder.

index.html:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**

score 5 · Answer 9 · answered Aug 29 '18 at 14:20

5

TO RELOAD FAVICON FOR ANY WEB PROJECT:

Right click on the favicon and click 'reload'. Works every time.

answered Aug 29 '18 at 14:20

Brian B

310
2
5

score 4 · Answer 10 · answered Sep 13 '17 at 22:06

4

Move favicon.ico to your assets and then to img folder, and after that only change your icon link tag in header. It helps me when favicon was not displayed at all.

answered Sep 13 '17 at 22:06

KGROZA

63
7

In Chrome and Firefox, it was not a caching problem. I moved my ICO file, and Chrome and Firefox both immediately updated. – Steve11235 Dec 12 '17 at 22:12
I updated my favicon.ico file and it wouldn't load. I did this (moved to assets and updated links) and worked fine. – David Feb 28 '18 at 05:26

score 3 · Answer 11 · answered Jun 12 '18 at 18:49

For future readers, if this happens to you, your browser wants to use the old cached favicon.

Follow these steps:

Hold CTRL and click the "Refresh" button in your browser.
Hold Shift and click the "Refresh" button in your browser.

Fixed.

score 3 · Answer 12 · answered Jan 21 '19 at 04:30

Please follow below steps to change app icon:

Add your .ico file in the project.
Go to angular.json and in that "projects" -> "architect" -> "build" -> "options" -> "assets" and here make an entry for your icon file. Refer to the existing entry of favicon.ico to know how to do it.
Go to index.html and update the path of the icon file. For example,
Restart the server.
Hard refresh browser and you are good to go.

score 3 · Answer 13 · answered Jul 24 '20 at 04:42

Ok, here in 2020 on 9.1.12. I don't understand why exactly this process is so difficult. I followed almost every post above and none of them worked for me.

What DID work was this: Totally removing the favicon reference in index.html. It's totally counter intuitive but it works. You DON'T need to put it in the assets folder. I tried all of that but unfortunately none of those suggestions worked.

index.html

<!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> DELETE THIS -->

angular.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],

and when I run ng build --prod, the favicon is there. Displays on my live server too.

score 2 · Answer 14 · edited Aug 08 '18 at 09:26

2

<link rel="icon" type="image/x-icon" href="#">

Add source of your icon and restart app it will change.

edited Aug 08 '18 at 09:26

eyllanesc

235,170
19
170
241

answered Aug 08 '18 at 09:24

Adeel

133
2
4
14

score 2 · Answer 15 · answered Feb 19 '21 at 08:15

2

<link rel="icon" type="image/x-icon" href="./assets/myimage.png">

single period

answered Feb 19 '21 at 08:15

Steve Nginyo

303
3
12

score 1 · Answer 16 · edited Apr 18 '18 at 23:22

1

as simple and easy as :

add your icon or png in the same directory as favicon
edit .angular-cli.json, in assets remove favicon.ico put yours in place
edit index.html, search favicon and put yours in place
run ng serve again

that's done

edited Apr 18 '18 at 23:22

byxor

5,930
4
27
44

answered Mar 21 '18 at 14:15

gxmad

1,650
4
23
29

score 1 · Answer 17 · 2018-05-01T20:59:44.363

I was playing around with this for a little while. Turns out that the favicon is apparently handled by a node module called @scematics (at least in Angular5).

You can change your favicon in this folder:

[YourProjectName]\node_modules\@schematics\angular\application\files\__sourcedir__

In that folder there should be a favicon.ico, that's the one that is loaded. Im pretty shure this doesnt apply to everyone but it worked out for me.

Hope this helped. Happy coding! :D

score 1 · Answer 18 · answered Jun 12 '18 at 15:52

For those needing a dynamically added favicon here is what I did with an app initializer:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core'

export function faviconInitFactory () {

 return () => {
  const link: any = document.querySelector(`link[rel*='icon']`) || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'

  if (someExpression) {
    link.href = 'url' || 'base64'
  } else {
    link.href = 'url' || 'base64'
  }

  document.getElementsByTagName('head')[ 0 ].appendChild(link)
}

}

export const FAVICON_INIT_PROVIDER: FactoryProvider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: faviconInitFactory,
  deps: []
}

Just remove fav.ico file under src/ and add this. The favicon will be added before app start

score 1 · Answer 19 · answered Sep 26 '18 at 20:31

I tried many of these solution but was unsuccessful. The one that worked for my angular 5 application was the below:

index.html: Comment out your link tag

 <!-- <link rel="icon" type="image/png" href="src/assets/images/favicon.ico"> -->

.angular-cli.json: leave the item type as ".ico"

 "assets": [
      "assets",
      "favicon.ico"
    ],

LASTLY..

In your project folder structure, have the favicon.ico inside the src ex: (C:\Dev\EPS\src). You do NOT need to have it in your asset folder since you aren't referencing it.
Make sure your icon is not broken (Your icon should be readable if viewed through window explorer aka no broken window icon)
must be 32 x 32 dimension

score 1 · Answer 20 · answered Feb 26 '22 at 17:00

Follow these steps to change icon from default angular to an application specific one.

For AngularJS Projects: Add the icon inside the webapps. Inside the index.html file add the following line

<link rel = "icon" type = "image/x-icon" href = "location of specifed icon inside webapps directory"> in the head tag.

For projects based on Angular 7/8: Add the icon image to assets folder. Go to index.html file inside the project. Change the following link tag

<link rel = "icon" type = "image/x-icon" href = "favicon.ico"> TO <link rel = "icon" type = "image/x-icon" href = "assets/fileName">

This should modify the default angular icon to your specified icon.

score 0 · Answer 21 · edited Sep 11 '17 at 09:54

0

Make sure when you use icon image it is not manipulated extension, like if you download a png image and then manually change its extension from png to icon. In this case, your image will be corrupted. And browser does not understand.

I did this mistake, but after using original icon image its start working.

edited Sep 11 '17 at 09:54

wscourge

10,657
14
59
80

answered Sep 11 '17 at 09:31

payal tyagi

1

score 0 · Answer 22 · edited Jun 20 '20 at 09:12

1.Check your link tag on index.html file that it should look like this.

<link red="icon" type="image/x-icon" href="favicon.ico">

2.Check file name of favicon.ico in /src directory.

3.Rerun Angular with ng serve and refresh application.

4.If it doesn't show (or something look like it buffer old favicon.ico file). try to refresh path of favicon again to load favicon.ico file (eg. refresh yourdomain.com/favicon.ico)

score 0 · Answer 23 · edited Nov 22 '17 at 03:22

0

I had the same problem.

If you are using a Mac, you will need to empty the Cache (Option+⌘+E) and reload the page in addition to restarting the app (and of course changing the path in index.html).

edited Nov 22 '17 at 03:22

robinCTS

5,746
14
30
37

answered Nov 17 '17 at 21:00

alang

1

score 0 · Answer 24 · answered Feb 27 '18 at 07:28

0

Remove your existing favicon.ico
Add new icon into the src folder with name as "favico.ico"
Clear Cache in your browser.

The icon does not reflect only because of your browser cache. Sometimes try restarting the application

answered Feb 27 '18 at 07:28

Sri Vivek

525
7
9

score 0 · Answer 25 · edited Jun 20 '20 at 09:12

Following steps worked for me.

Remove default "favicon.ico" file with a new one with different name i.e. "_favicon.ico" in my case.

Note :: Don't keep the default name, as it's get's cached in your browser and difficult to overwrite with new icon.

Update index.html with new link tag i.e.

 <link rel="icon" type="image/x-icon" href="_favicon.ico" />

Update .angular-cli.json with new icon name i.e. "_favicon.ico".
Build & launch your app, and do a hard refresh Ctrl+F5.

score 0 · Answer 26 · edited May 09 '18 at 22:56

0

<link rel="icon" type="image/x-icon" href="assets/liana.jpg">

"assets": [

        "assets/sorry.jpg",
        "assets/liana.jpg"

  ],

this worked for me.

edited May 09 '18 at 22:56

eyllanesc

235,170
19
170
241

answered May 09 '18 at 22:40

Ester Vardan

1

plus – Ester Vardan May 09 '18 at 22:42

Black Mamba · Answer 27 · 2018-05-27T08:46:56.690

0

In my case, the problem was that I had different dimensions compared to normal one. I had 48x48 px whereas it was expecting 32x32 px and my extension was png so I had to change it to ico

edited May 27 '18 at 08:46

answered May 25 '18 at 14:36

Black Mamba

13,632
6
82
105

score 0 · Answer 28 · answered Sep 16 '18 at 01:25

What really works for me was putting my favicon into assets folder and apear automatically in the browser.

change location to assets folder inside src folder.
change index.html like this <link rel="icon" type="image/x-icon" href="assets/favicon.png">

score 0 · Answer 29 · answered Sep 22 '20 at 08:28

An editor (in my case IDEA 2020.2) can sometimes add src/ prefix to icon location in href. I mean

 <link rel="icon" ... href="src/favicon.ico">

instead of

  <link rel="icon" ... href="favicon.ico">

So in this case you should remove this src/ part in href. This solved the problem for me.

score 0 · Answer 30 · answered Jan 19 '21 at 10:09

If upgarde angular to 8+ you must change in angular.json

"assets": [
  "assets",
  "favicon.ico"
]

to

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]

score -1 · Answer 31 · answered Jan 14 '18 at 05:39

-1

Deleting chromes favicon cache and restarting the browser on the mac worked for me.

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons

answered Jan 14 '18 at 05:39

Padawan

770
1
8
18

score -1 · Answer 32 · answered Feb 07 '18 at 22:49

I had the same issue, and solved it by forcing the refreshby the method described here:

To refresh your site's favicon you can force browsers to download a new version using the link tag and a querystring on your filename. This is especially helpful in production environments to make sure your users get the update.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

score -1 · Answer 33 · answered May 23 '18 at 12:15

-1

I fixed the issue by creating my own .ico file and created a assets folder and put the file over there. Then changed the link href in Index.html

answered May 23 '18 at 12:15

Jerin Kurian

164
2
9

How to change Angular CLI favicon

33 Answers33

LASTLY..

Linked

Related