Angular-2 : Change favicon icon as per configuration

Question

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.

Default favicon

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.

What build scheme do you use? Your question is too generic without html code that you have — shershen
– shershen, Commented Oct 6, 2016 at 6:23
I wrote a whole piece here on this by using Angular's build system to do it properly medium.com/@benracicot/… — Ben Racicot
– Ben Racicot, Commented Mar 1, 2023 at 14:06

Verri · Accepted Answer · 2020-01-30 15:00:42Z

55

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

edited Jan 30, 2020 at 15:00

answered Aug 18, 2017 at 9:47

Verri

1,60820 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phil Over a year ago

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

Brad Richardson Over a year ago

This is the correct answer. Use the correct import like @fdsfdsfdsfds recommends.

user1653042 Over a year ago

Thank You @Verri!! Was searching for a while before finding this and it works perfect across Chrome, Firefox, and IE11 (need to support for client). Our setup is running through CircleCI so the circle-ci.xml config is setting the base-href to something diff for each environment.

Harrison O Over a year ago

This solution works fine but for Angular 8.0 or > import { DOCUMENT } from '@angular/common';

Kuppusamy · Accepted Answer · 2020-03-18 17:59:18Z

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

Krish · Accepted Answer · 2019-01-18 17:45:57Z

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.

Parshwa Shah · Accepted Answer · 2019-11-06 15:55:53Z

app.module.ts

import {NgModule} from '@angular/core'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './path/to/app.component'; import {AppService} from './path/to/app.service'; // .... @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, // ... ], bootstrap: [AppComponent], providers: [AppService] }) export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule);

app.service.ts

import { Injectable, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import {Http, Response} from '@angular/http'; import {Observable} from 'rxjs/Rx'; @Injectable() export class AppService { constructor(@Inject(DOCUMENT) private _document: HTMLDocument, private http:Http) getAppDetails(appId: string) { return this.http.post(url, appId) .map((response: Response) => { let details = response.json(); return details; }) .do(data => console.log(data)) .catch(this.handleError); } private handleError(error: Response) { console.error(error); return Observable.throw(error.json().error || 'Server error'); } setAppFavicon(id: string, basepath: string, icon: string){ this._document.getElementById('appFavicon').setAttribute('href', basepath+"/"+ icon); } }

app.component.ts:

import {Component} from "@angular/core"; import {AppService} from "../path/to/app.service"; @Component({ selector: 'application', templateUrl: './path/to/app.component.html' }) export class ApplicationComponent { details: any; constructor(private appService: AppService) { this.details = appService.getAppDetails(id); appService.setAppFavicon(id,basepath,this.details.icon); } }

cant believe this answer receives so many votes while it is suggesting mod the dom with jquery
Absolutely. Angular has many DOM related engines to do just this. NEVER use jQuery.
NEVER use jQuery in Angular you should not manipulate DOM outside of Angular component life-cycle
getting the data without subscribing to the service method getAppDetails(), and passing it directly to the setAppFavIcon(). what if the endpoint is taking time to return the results.

Edric · Accepted Answer · 2017-08-16 15:23:15Z

Then you can use javascript to set favicon per configuration by adding following function to your <script> block:

 <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); }); //here favicon is set (function() { var link = document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = '../path/to/xyz.png'; //path to selected favicon file document.getElementsByTagName('head')[0].appendChild(link); }()); </script>

It should be set from component, because i get new icon in compenent and it will dynamic by page

ktretyak · Accepted Answer · 2016-10-06 09:59:25Z

Outside <application></application>, you can to use only Title class:

import {Title} from '@angular/platform-browser'; export class YourClass(){ constructor(private title: Title){} yourNameMethod(){ this.title.setTitle('your title'); } }

I have set title already, as you can see in image, now i wants to set favicon icon, can you please help me regarding that

Collectives™ on Stack Overflow

Angular-2 : Change favicon icon as per configuration

6 Answers 6

4 Comments

Comments

Comments

4 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

4 Comments

1 Comment

1 Comment

Linked

Related