Change the favicon in Angular Easy way

In this tutorial, we are going to learn about how to change the default favicon in angular app, which is set by the angular-cli.

Changing favicon

1. Open the angular app in your favorite code editor.

2. Navigate to src folder and remove the favicon.ico file.

3. Now, add a new favicon inside the src folder.

Note: The favicon filename should be favicon.ico like in the above screenshot.

4. Reload your app to see the new favicon.

If your favicon file name and image format is different like(icon2.png or icon9.jpg) then you can follow the below steps.

1. Add your favicon inside the src folder.

2. Open the index.html file and change the favicon file name (with the newly added icon name).

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

3. Inside the angular.json file add the favicon in assets array.

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