Angular-2 : Change favicon icon as per configuration
I am rendering a dynamic page, menu and other items in my application. I also want to change favicon as per configured by admin.
Say, for example, if when my page load configured favicon is xyz.png then it will show xyz.png as the favicon.
As in the below image, new favicon should replace existing one near by "Test Application". Right now, it shows the default favicon as seen below.
index.html:
<!DOCTYPE html>
<html>
<head>
<base href="/MyFirstAngular2/" >
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" id="appIcon" href="/favicon.ico" type="image/x-icon" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="css/Site.css" rel="stylesheet" />
<script src="scripts/jquery-2.2.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/main/shim.min.js"></script>
<script src="scripts/main/zone.js"></script>
<script src="scripts/main/reflect-metadata.js"></script>
<script src="scripts/main/system.src.js"></script>
<script src="scripts/system.config.js"></script>
<script>
document.SYSTEMJS_CONFIG.map.app = 'scripts/configs';
document.SYSTEMJS_CONFIG.packages.app = { main: 'application.ts', defaultExtension: 'ts' };
System.config(document.SYSTEMJS_CONFIG);
System.import('app').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<application></application>
</body>
</html>
I get a new favicon on every component load, so you have to just change favicon icon from any component call.
Answer
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';