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

Press Ctrl+F5 in browser window

Answer 2

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

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

Answer 3

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

Answer 4

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.

Answer 5

Please follow below steps to change app icon:

1. Add your .ico file in the project.
2. 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.

3. Go to index.html and update the path of the icon file. For example,

4. Restart the server.

5. Hard refresh browser and you are good to go.

Answer 6

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

Follow these steps:

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

Fixed.