Set or replace a favicon in Angular

The short answer

An Angular CLI project ships with a default favicon file and a link tag in src/index.html that points to it. To replace the favicon, put your new icon file where the build copies static assets, then update the link tag in index.html to match the new filename and format. Rebuild or restart the dev server, and clear the browser's cached icon before you judge the result. To change the icon while the app is running, for example per tenant or per theme, update the icon link element through Angular's DOCUMENT token.

In this article, "favicon" means the small icon a browser shows in tabs, bookmarks and history. The vector side of the topic is the SVG favicon, a logo exported as scalable artwork. Most browsers can render it directly, but it should usually have a raster fallback.

Where the favicon lives in an Angular project

Projects generated by older Angular CLI versions keep favicon.ico in the src folder and list it in the assets array in angular.json. Projects generated by newer CLI versions keep favicon.ico in a top-level public folder, and the build copies everything in that folder to the output root. No version-specific evidence was supplied for this article, so check the assets configuration in your own angular.json rather than assuming either layout.

Whichever layout your project uses, the build must copy the file to the output, and the href in index.html must resolve to the file's location. Relative hrefs resolve against the base href in index.html. This matters if the app is deployed under a sub-path rather than at the site root.

Replacing the default icon

• Export or obtain the new icon files, for example an SVG version of the logo mark and an ICO or PNG fallback.
• Place them in the folder your angular.json copies as assets, such as public or src.
• If you keep the same filename as the default icon, you can simply overwrite it. If you change the filename or format, also update the link tags in index.html.
• If your project lists individual files in the assets array, add the new filenames there. Otherwise the build will not copy them.
• Rebuild or restart the dev server, then confirm the file is present in the build output folder.

A typical head section that offers an SVG icon with raster fallbacks looks like this:

<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">

Browsers that support SVG favicons can use the vector file, and others fall back to the ICO. Support for SVG favicons has varied across browsers, Safari in particular, so the fallback is a sensible default rather than an optional extra. Apple home-screen icons use a separate PNG supplied through the apple-touch-icon link. The tab favicon does not cover that use.

Preparing a vector logo for use as a favicon

A favicon is displayed at very small sizes, so the full logo lockup with wordmark and tagline rarely works. A simplified mark or monogram usually reads better. This is a design judgment, not a technical requirement, but fine detail and thin strokes tend to disappear at tab size.

Do not assume a file is true vector artwork just because its name ends in .svg. An SVG can contain real paths and shapes, or it can simply wrap an embedded raster image. Open the file in a vector editor or a text editor and look for path or shape elements rather than an embedded image element. An SVG that only wraps a raster image gains none of the scaling benefits and may be much larger than needed.

Because an SVG favicon is a document in its own right, it should be self-contained. Convert text to outlines, because webfonts referenced from the page are not available inside the icon. Avoid references to external files. An SVG favicon can also include a style block with a prefers-color-scheme media query, which lets the mark switch colors for dark browser themes. Raster fallbacks cannot adapt this way.

If the logo is not your own, check what you are allowed to do with it. Permission to download a logo is not the same as permission to modify the artwork, to use its fonts, or to display the trademark as your site's icon.

Changing the favicon at runtime

Some apps need to change the icon after load, for example to show a notification badge, a tenant's brand or a theme variant. In Angular, inject the DOCUMENT token rather than touching the global document directly. This keeps the code compatible with server-side rendering. A small service can find the existing icon link and update it:

import { Injectable, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class FaviconService {
  private document = inject(DOCUMENT);

  set(href: string, type = 'image/svg+xml'): void {
    let link = this.document.querySelector<HTMLLinkElement>("link[rel~='icon']");
    if (!link) {
      link = this.document.createElement('link');
      link.rel = 'icon';
      this.document.head.appendChild(link);
    }
    link.type = type;
    link.href = href;
  }
}

This code updates only the first matching icon link. If index.html declares several icon links, such as SVG and ICO, the browser may keep using one you did not change. In that case, either update every icon link or remove the extras and keep a single one.

When the old icon keeps appearing

• Browsers cache favicons aggressively and often separately from the page. Try a private window, clear the site's cached data, or add a version query string to the href, for example favicon.svg?v=2.
• Confirm the new file is actually in the build output. A file missing from the assets configuration is a common cause.
• Check the network panel in developer tools for a failed icon request. A not-found response usually means the href and the file location don't match, often because of the base href.
• If only some browsers show the new icon, check whether they fall back to the ICO or PNG file. The fallback may still contain the old artwork.

Gaps in this guidance

No project-specific details, Angular version numbers or browser support data were supplied for this article. The folder layout and asset configuration described above reflect general Angular CLI conventions. Exact browser support for SVG favicons changes over time, so check current compatibility data for the browsers your audience uses before you rely on an SVG icon alone.