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');