Menu
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.
303
You can do it using React's useEffect hook and some JavaScript. Usually, you would define your useEffect in your page components, so when your page is rendered, the effect triggers which updates the favicon. Are you setting it like link. href = {logo} or link.
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'; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
