--- title: Angular Favicon Generator description: Angular only ships the files its build config lists. Add icons to the assets array in angular.json and link them from index.html, or they never reach dist. canonical: https://favicontools.com/platforms/angular-favicon --- # Angular Favicon Generator Angular copies static files only if the build configuration tells it to. A file that isn't matched by the assets entry in angular.json never reaches dist/, no matter where you put it in the project. ## The assets array decides what exists Every other framework here copies a whole directory by convention. Angular does it by configuration: the build target in angular.json has an assets entry, and the builder copies only what that entry matches. Newer scaffolds point it at a public/ directory with a glob; older ones list individual paths, starting with src/favicon.ico. Nothing warns you when this goes wrong. Adding apple-touch-icon.png next to an already-working favicon.ico in an older project builds cleanly and then 404s in production, because favicon.ico was listed by name and your new file was not. ## A newer Angular scaffold ``` my-angular-app/ public/ # copied to dist by the glob below favicon.ico <- add apple-touch-icon.png <- add icon-192x192.png <- add icon-512x512.png <- add manifest.webmanifest <- add src/ index.html # the link tags go here main.ts app/ angular.json # controls what gets copied ``` Older projects have no public/ directory — the icons sit in src/ and each one has to be named in angular.json. ## angular.json ```json { "projects": { "my-angular-app": { "architect": { "build": { "options": { "index": "src/index.html", "assets": [ { "glob": "**/*", "input": "public" } ] } } } } } } ``` Newer scaffolds use this glob, so anything dropped into public/ is copied. In an older project the array instead holds strings like "src/favicon.ico", and you add one line per icon. ## src/index.html ```html ``` The hrefs are deliberately relative. They resolve against the base href, which is what makes a sub-path deploy work. > **Check dist before blaming the browser:** A missing assets entry is not a build error — the build succeeds and the file simply isn't there. After ng build, look in dist/ for the icon, or open the network tab and check the status code. That takes ten seconds and rules out the cache entirely. ## Angular favicon FAQ ### Can I add the icon links from Angular code instead of index.html? Angular ships Title and Meta services, which cover the title and meta tags but not link elements. Even if you inserted one manually, it would run after bootstrap, well after the browser asked for the icon. Keep the tags in src/index.html. ### Why does the favicon 404 when the app is served under a sub-path? Because an href starting with a slash resolves against the domain root. Build with --base-href set to your subdirectory so the base tag in index.html is correct, and write the icon hrefs relative, without a leading slash. ### Does ng add @angular/pwa handle icons for me? It scaffolds a web app manifest plus a set of placeholder PNG icons and wires up the service worker config. The icons are placeholders — replace the image files in place and keep the generated manifest and asset entries as they are.