Adding Icons to an Angular Web Site

Changing out the icons for an Angular website is just a few steps. This guide assumes you have an icon already in place, preferably in PNG format.

First, use a tool like Real Favicon Generator to create the source files, which will include a favicon.ico file alongside a series of apple-touch-icon* files. Add these files to the /src directory.

After that, make the following change to your index.html file:

And finally make the change to angular.json to ensure the files are delivered correctly on build:

To test that everything worked successfully, make sure to run a build:

ng build

After this finishes, check the /dist folder to see the icon files added in the step above.