Favicon generator for Angular

Configure favicons in angular.json assets and index.html for CLI projects.

Angular CLI

Generate your favicon package first, then follow the steps below to integrate with Angular.

Installation steps

1
Place generated favicon files in src/ or configure angular.json to copy from a favicons folder.
2
Update src/index.html with the link tags in the <head> section.
3
Replace the default src/favicon.ico if your template ships one.
4
In angular.json, ensure assets array includes favicon paths if using a subfolder.
5
Run ng build and verify dist/project-name/favicon.ico exists.

Code & configuration

Copy and adapt for your Angular project

<!-- src/index.html -->
<head>
  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

// angular.json (assets excerpt)
"assets": [
  "src/favicon.ico",
  "src/favicon.svg",
  "src/favicon-96x96.png",
  "src/apple-touch-icon.png",
  "src/site.webmanifest"
]

Pro tips

Angular 17+ standalone apps still use index.html for favicon links.
For PWA, align site.webmanifest icons with your ngsw-config.json if applicable.

Files to deploy

favicon.ico

favicon.svg

favicon-96x96.png

apple-touch-icon.png

android-chrome-192x192.png

android-chrome-512x512.png

site.webmanifest