Change favicon dynamically based on browser

Question

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

Possible duplicate of Changing website favicon dynamically

Rob
– Rob

2017-07-09 21:43:58 +00:00
Commented Jul 9, 2017 at 21:43 — Rob
– Rob, Commented Jul 9, 2017 at 21:43

Rahul Singh · Accepted Answer · 2017-07-09 20:58:13Z

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

.

I would rather not use jquery unless I need to, I'll give that renderer 2 a check. I think that is probably the best solution

Abhishek Parmar · Accepted Answer · 2017-07-09 20:55:12Z

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

Right, but where would the optimal place be in an angular project?

Collectives™ on Stack Overflow

Change favicon dynamically based on browser

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related