---
title: Angular Favicon Not Showing? Here's the Fix
description: Angular only ships files its build lists. A favicon not matched by the assets array in angular.json never reaches dist and 404s in production.
canonical: https://favicontools.com/fix/angular-favicon-not-showing
---

# Angular Favicon Not Showing? Here's the Fix

Angular copies static files only if the build configuration tells it to. An icon that isn't matched by the assets entry in angular.json never reaches dist. The build succeeds and the file isn't there.

## The assets array decides what exists

Every other framework copies a whole directory by convention. Angular does it by configuration: the build target's assets entry copies only what it 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 is wrong. Add apple-touch-icon.png next to a working favicon.ico in an older project and it builds cleanly, then 404s in production: favicon.ico was listed by name and your new file was not.

> **Check dist before blaming the browser:** A missing assets entry isn't a build error. The build succeeds and the file is absent. After ng build, look in dist/ for the icon, or open the network tab and check the status code. Ten seconds rules out the cache entirely.

## The assets glob (newer scaffolds)

```json
"assets": [
  { "glob": "**/*", "input": "public" }
]
```

Anything in public/ is copied. In an older project the array holds strings like "src/favicon.ico", and you add one line per icon.

## Angular favicon not showing: FAQ

### Why is my Angular favicon not showing?

The icon isn't matched by the assets entry in angular.json, so it never reached dist. Look in dist/ after ng build. If the file isn't there, add it to the assets array (or the public/ glob) and rebuild.

### Why does it 404 under a sub-path?

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 @angular/pwa add my icons?

It scaffolds a manifest and placeholder PNG icons and wires the service worker. The icons are placeholders. Replace the image files in place and keep the generated manifest and asset entries.