CODEWITHSUNDEEP
javascripthtmlangular
Surreal
Surreal

Reputation: 1047

Change favicon dynamically based on browser

I am trying to come up with a way to set my favicon to be animated / static based on the users browser. The two favicon icons being 

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

I can probably detect the outdated browsers with a

navigator.userAgent.indexOf(//unfitBrowswer);

But where should this code reside in the project to set the favicon? Should I create a services that all my components use or is there somewhere in main.ts or otherwise?

Slightly different than linked duplicate due to location in angular as opposed to a pure JS script that can be run on startup

Upvotes: 0

Views: 1251

Answers (2)

Rahul Singh
Rahul Singh

Reputation: 19622

You can make use of jquery in Angular to do this. Once you get the browser configuration. Call this method on ngOnInit in your App Component

    SetApplicationFavicon(id,basepath,icon)
     { 
          $("#"+id).attr("href", basepath+"/"+icon); 
     }

Or you can even make use of Renderer 2 to change the attribute of the href tag at runtime either will work

.

Upvotes: 1

Abhishek Parmar
Abhishek Parmar

Reputation: 145

navigator.userAgent.indexOf(//unfitBrowswer);

use in main.js file you need to use the js for that.... change the href attribute of the favicon link when you detect the version of the browser

Upvotes: 0

Related Questions