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.