How to change default favicon icon in angular 2 app?

Question

• os: win32 x64
• angular-cli: 1.0.0-beta.22-1
• node: 7.1.0

Repro steps.

• Remove the line

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

  from index.html

• ng build
• ng serve
• browse through http://localhost:4200/

It still shows the default angular favicon. Also tried the above steps after clearing the browser cache and still the same issue.

Below browser are used to reproduced the issue:

• Chrome(Version 54.0.2840.99 m)
• IE(Version 11.0.98600.18499)

Answer 1

Put your icon file into /public or /src/assets folder. This will make your icon visible to the browser. See the branch on Github.

Answer 2

For Angular 9

1. I created a favicon.png file in /src and dropped the image inside the file

2. In angular.json add the file to assets

"assets": [
              "src/favicon.png"
          ]

3. In index.html use this script

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

4. You may need to clear your cache if you're using Chrome.

    for Windows: CTRL F5 
    for Mac: CMD SHIFT R