Where is the favicon in an Angular project?

At src/favicon.ico by default, and the link tag is already in src/index.html. Replace that file with your own, and add any extra PNG/Apple/manifest icons to the assets array in angular.json so the CLI copies them.

How does Angular copy the favicon to the build?

The Angular CLI copies entries listed in the assets array (under the build options in angular.json) to the output root. src/favicon.ico is included by default; add other icon files there so ng build emits them.

Why is my Angular favicon 404ing after ng build?

The file is referenced in index.html but not listed in the angular.json assets array, so it is never copied to the output. Add it to assets and rebuild, then confirm the path returns 200.

How do I add an Apple touch icon and PWA icons in Angular?

Add apple-touch-icon.png and the 192/512 PWA icons plus site.webmanifest to src/, register them in the angular.json assets array, and add the corresponding link tags to src/index.html's head.

All platforms

Favicon for Angular

How to add a favicon in Angular

To add a favicon in an Angular CLI app, replace the default src/favicon.ico and add a <link> tag in src/index.html. For PNG, Apple touch, and PWA icons, drop the files in src/ (or a folder) and list them in the assets array of angular.json so ng build copies them to the output root.

What you need

favicon.ico (Angular ships a default at src/favicon.ico) plus PNG favicons and a 180 apple-touch-icon.
Extra icon files registered in the build options assets array of angular.json.
A site.webmanifest for Android/PWA icons, linked from src/index.html.

Step-by-step: add a favicon in Angular

Generate the full set. Use Logo2Favicon to create favicon.ico, the PNG sizes, apple-touch-icon, the Android/PWA icons, a maskable icon, and the manifest - entirely in your browser, no upload.
Replace src/favicon.ico. Overwrite the default src/favicon.ico with your generated one. The Angular CLI already copies src/favicon.ico to the build root, and src/index.html links it by default.
Register extra icons in angular.json. Add the new PNG, apple-touch-icon, and manifest files to the assets array under projects > [app] > architect > build > options so ng build copies them to the output folder.
Link the icons in src/index.html. Add the icon, apple-touch-icon, and manifest link tags inside <head> of src/index.html, then run ng build and verify the rendered head.

angular.json assets array (copies files to the build output root):

"assets": [
  "src/favicon.ico",
  "src/apple-touch-icon.png",
  "src/favicon-32x32.png",
  "src/site.webmanifest"
]

Common mistakes to avoid

Adding link tags in src/index.html but forgetting to list the files in angular.json assets, so ng build never copies them and they 404.
Editing a component template instead of src/index.html - Angular components do not control the document head's icon tags.
Putting icons in src/assets/ without confirming that folder is in the assets array (it usually is, but the URL becomes /assets/...).
Not clearing the cache after ng build, so the old favicon persists despite the new file shipping.

Free forever, no sign-up

Generate a complete icon set for Angular

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Angular. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where is the favicon in an Angular project?: At src/favicon.ico by default, and the link tag is already in src/index.html. Replace that file with your own, and add any extra PNG/Apple/manifest icons to the assets array in angular.json so the CLI copies them.
How does Angular copy the favicon to the build?: The Angular CLI copies entries listed in the assets array (under the build options in angular.json) to the output root. src/favicon.ico is included by default; add other icon files there so ng build emits them.
Why is my Angular favicon 404ing after ng build?: The file is referenced in index.html but not listed in the angular.json assets array, so it is never copied to the output. Add it to assets and rebuild, then confirm the path returns 200.
How do I add an Apple touch icon and PWA icons in Angular?: Add apple-touch-icon.png and the 192/512 PWA icons plus site.webmanifest to src/, register them in the angular.json assets array, and add the corresponding link tags to src/index.html's head.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.