{
  ...
  "projects": {
    "[YOUR PROJECT NAME]": {
      ...
      "architect": {
        ...
        "build": {
          ...
          "options": {
            ...
            "assets": [
              "src/favicon.ico",
+             "src/favicon-success.ico",
+             "src/favicon-error.ico",
              "src/assets"
            ],
          }
        }
      }
    }
  }
}

Create a new file called (for example) favicon.config.ts and put into it the following code:

// 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',
};

Open index.html file and add an ID to the link tag defining the favicon:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>NgxFaviconDemo</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link id="favicon" rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Import the NgxFaviconModule with forRoot method and define your own config once only:

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

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

How to use it

Once everything is setup, you can inject the NgxFaviconService and use either the setDefaultFavicon, setCustomFavicon or setFaviconByUrl methods.

Example from a component:

.ts file:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
+  public CustomFavicon: typeof CustomFavicon = CustomFavicon;

+  constructor(private ngxFaviconService: NgxFaviconService<CustomFavicon>) {}

+  public setDefaultFavicon(): void {
+    this.ngxFaviconService.setDefaultFavicon();
+  }

+  public setCustomFavicon(faviconName: CustomFavicon): void {
+    this.ngxFaviconService.setCustomFavicon(faviconName);
+  }

+  public setFaviconByUrl(faviconUrl: string): void {
+    this.ngxFaviconService.setFaviconByUrl(faviconUrl);
+  }
}

.html file:

+ <button (click)="setDefaultFavicon()" data-btn-default>Set default</button>
+ <button (click)="setCustomFavicon(CustomFavicon.FAVICON_SUCCESS)" data-btn-success>
+   Set success
+ </button>
+ <button (click)="setCustomFavicon(CustomFavicon.FAVICON_ERROR)" data-btn-error>
+   Set error
+ </button>
+ <button (click)="setFaviconByUrl('https://en.wikipedia.org/static/favicon/wikipedia.ico')" data-btn-url>
+   Set by URL
+ </button>

A complete example using the app is available in this repo, feel free to take a look into it (/src) and the source code of the library is located in /projects/ngx-favicon.

How to contribute

If you're willing to contribute to that project, feel free to do so.

Fork the project
Go into the repo and install dependencies by running yarn
Create a branch ex: git checkout -b /feat/my-feature or git checkout -b /fix/my-fix
Make some changes
Run yarn run prettier:write to make sure formatting is fine
Run yarn run lib:build:prod to build the library
Run yarn run demo:test to make sure all the tests are passing
Commit your changes using the Angular commit message conventions
Open a pull request

Thanks!

FAQs

What is ngx-favicon?

Is ngx-favicon popular?

Is ngx-favicon well maintained?

Package last updated on 30 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

ngx-favicon

NgxFaviconDemo

Setup

How to use it

How to contribute

Related posts

Understanding License Exceptions: What Developers Need to Know

Developer Accuses Tencent of Copyright Violation After Python Utility’s License Changed from GPLv3 to BSD