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 hav

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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"
        ],**

Answer 6

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).