How to Add a Favicon in Angular

The short answer

In an Angular CLI project, you add a favicon in three steps. Put the icon file in the folder the build copies as static assets. Reference it with a link tag in the head of src/index.html. Then rebuild and confirm the browser loads the new file instead of a cached one. A new CLI project already includes a placeholder favicon.ico wired up this way, so in most cases you replace that file rather than configure anything new.

A favicon is the small icon a browser shows in tabs, bookmarks and history. It is almost always shown as a tiny raster image (a grid of pixels), even when you design it as vector artwork (shapes defined by paths and coordinates that scale without losing sharpness). That gap between a scalable logo and a tiny pixel icon is the main design decision, and it is covered after the setup steps.

Step 1: Find where your project keeps static assets

Angular projects differ by CLI version, so check your own project before moving files. Open angular.json and find the assets option under your project's build target. That option controls which files are copied unchanged into the build output.

• Newer projects: assets usually point to a public folder at the project root, and the default favicon.ico sits in that folder.
• Older projects: assets usually list src/favicon.ico and src/assets, and the default favicon.ico sits directly in src.
• Customized projects: the assets entries may have been changed. Trust what your angular.json says over either default.

Newer-style configuration typically looks like this:

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

Older-style configuration typically looks like this:

"assets": [
  "src/favicon.ico",
  "src/assets"
]

Step 2: Add or replace the icon file

The simplest route is to overwrite the existing favicon.ico with your own file and keep the same name. You then don't need to change index.html or angular.json.

If you use a different name or format, such as favicon.svg or icon.png, place it in the assets folder from Step 1. In an older-style project, also add its path to the assets array if it sits outside a folder that is already copied. Otherwise the build will not include it, and the browser will request a file that doesn't exist.

Step 3: Reference the icon in index.html

Open src/index.html and check the head section. The default CLI template contains a line like this:

<link rel="icon" type="image/x-icon" href="favicon.ico">

If you provide several formats, list each one with its own link tag and correct type. A common pattern is an SVG icon for browsers that support it, an ICO fallback, and a separate PNG for Apple home-screen icons:

<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

The href values are relative paths, and they resolve against the base href set in index.html. If you deploy the app under a subpath and change the base href, either at build time or in the file, the icon path follows it. A favicon that works locally but disappears after deployment often comes from this relationship.

Step 4: Build and verify

• Run the dev server or a production build, then confirm the icon file appears at the root of the build output.
• Open the app, open the browser's developer tools, and check the network panel for the icon request. It should succeed, not return a not-found error.
• Open the icon path directly in the browser to confirm it serves the new artwork.
• If the tab still shows the old icon, suspect caching. Browsers cache favicons aggressively, so try a hard refresh, a private window or a different browser before changing your code.
• Check the tab with both light and dark browser themes, because a mark that works on one background can vanish on the other.

Preparing logo artwork for the favicon

Angular only delivers the file. Whether the icon is recognizable depends on the artwork. A full logo with a wordmark (the logo's text set in a specific typeface) rarely survives at tab size, because fine letterforms and thin strokes merge into a blur. Most favicons use a single symbol taken from the identity: the logomark, a monogram, or one distinctive letter.

• Choose the simplest element of the logo that still identifies the brand on its own.
• Remove fine details, small counters (the enclosed spaces inside letters such as o or e), hairline strokes and taglines.
• Thicken strokes and widen the gaps between shapes so they stay distinct after downscaling.
• Build the symbol inside a square artboard with deliberate padding, because favicons are displayed in square slots.
• When exporting raster sizes from vector artwork, preview each size at actual pixel scale and adjust the shapes if edges turn muddy. This is a design recommendation, not a requirement of Angular or the browser.

An SVG favicon can carry your vector paths directly, but keep it lean. Convert text to outlines so the icon doesn't depend on installed fonts, and remove editor metadata, hidden layers and unused definitions. Browser support for SVG favicons is not universal, which is why an ICO or PNG fallback is usually kept alongside it.

Check your source file before you build from it. A file extension does not prove its contents: an SVG, AI, EPS or PDF can contain an embedded raster image instead of editable paths. Open the file and confirm the shapes are real vector objects. A file extension also says nothing about permission. Confirm you have the rights to use the logo as a site icon, especially when the artwork came from a third party or a template.

Gaps in this guide

No project-specific evidence was supplied, so this guide does not state exact pixel sizes, required icon sets for particular browsers or platforms, or behavior tied to a specific Angular release. File locations and configuration differ between CLI versions, so treat your project's angular.json as the authority. Check current browser and platform documentation for precise size requirements before final delivery.