by Sai gowtham

How to change the favicon in Angular

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.

angular-app-adding-favicon

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

  1. 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">
  1. Inside the angular.json file add the favicon in assets array.
"assets": [
    "assets",
    "icon24.png"],

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course