DEV Community

Prachi
Prachi

Posted on

Simple steps to replace your favicon icon in Angular 8|9

Favicon icon also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing a small icon. associated with a particular website or web page. A web designer can create such an icon and upload it to a website or a web page.
Its associated with a website at address bar. In angular it is stored with a default name i.e favicon.ico which is angular logo, we can change it in simple steps as below.
So, let's get started,
Step 1: copy your logo in src folder
Step 2: Navigate to src folder and remove the favicon.ico file.
Step 3: copy new png favicon inside src folder.
Step 4: Open the index.html file and change the favicon file name (with the newly added icon name).

Step 5: Inside the angular.json file change name of the favicon in assets array.
"assets": [
"src/favicon.png",
"src/assets"
],

That's it, In these five steps we can easily replace favicon icon in Angular.

Any suggestions will be appreciated..

Top comments (0)