Angular Service To Dynamically Update Favicon On App

ngx-favicon is an Angular service to dynamically update the favicon on your web app.

favicon generator, angular change favicon dynamically, angular favicon not updating, create react app favicon, how to change favicon html, how to change favicon in angular 10

Simple Javascript Library To Change The Favorite Page Icon | favicon.js

How to make use of it:

Install the library in your project:

npm i ngx-favicon

1. Put your favorite icon(s) somewhere in your project and don’t forget to add it to your angular.json file:

  "projects": {
      "architect": {
        "build": {
          "options": {
            "assets": [
+             "src/favicon-success.ico",
+             "src/favicon-error.ico",

2. Create a new file called favicon.config.ts and enter the following code in it:

// enum all your different favicons
// (for type safety)
export enum CustomFavicon {
  FAVICON_SUCCESS = 'faviconSuccess',
  FAVICON_ERROR = 'faviconError',

export type AvailableCustomFavicons = { [key in CustomFavicon]: string };

// -------------------------------------------------------------
// @warning do not forget to add your favicons to your bundle
// you should double check into angular.json file
// -------------------------------------------------------------
// map all the types of favicon to their href
export const customFavicons: AvailableCustomFavicons = {
  // for some reason, impossible to use the syntax
  // [CustomFavicon.FAVICON_SUCCESS]: 'favicon-success.ico',
  // otherwise we end up with an AOT ERROR
  faviconSuccess: 'favicon-success.ico',
  faviconError: 'favicon-error.ico',

3. Open the index.html file and add an identifier to the link tag specifying the favicon:


4. Import the NgxFaviconModule using the forRoot method and select your configuration only once:

+ import { NgxFaviconModule } from 'ngx-favicon';
+ import { customFavicons, AvailableCustomFavicons } from './favicon.config';

  imports: [
+   NgxFaviconModule.forRoot<AvailableCustomFavicons>({
+     faviconElementId: 'favicon',
+     defaultUrl: 'favicon.ico',
+     custom: customFavicons,
+   }),
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

angular change favicon dynamically

Update Favicon On App, NgxFaviconDemo Plugin/Github

See Demo And Download

Official Website(cloudnc): Click Here

This superior jQuery/javascript plugin is developed by cloudnc. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…