Angular-2 : Change favicon icon as per configuration

We have nodejs running in the back-end, we have URL specific favicon to display as a requirement.

In app.js we implemented a resolveConfig() function which will help us to get the url specific configuration.

The return value of above function is used in get favicon call as below.

app.js

app.get('/favicon.ico',(req,res)=> {
   let key = resolveConfig(req.hostname);
   switch (key) {
     case 'a':
       res.sendFile(__dirname + '/dist/assets/a.ico');
       break;
     case 'b':
       res.sendFile(__dirname + '/dist/assets/b.ico');
       break;
   }
});

index.html

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

*this might be useful if you have a nodejs in backend.

In index.html set link tag

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

and somewhere in your code import

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {}

and use it like this

this._document.getElementById('appFavicon').setAttribute('href', '/your/icon/path.ico');

Angular 5.0 <

import { DOCUMENT } from '@angular/platform-browser';

Worked well, no injections, no worries, simple code. But it's gonna be a pure javascript in your angular project.

document.getElementById('appFavicon').setAttribute('href', '/your/icon/path.ico');