0

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

Surreal
  • 1,007
  • 1
  • 13
  • 29
  • Possible duplicate of [Changing website favicon dynamically](https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically) – Rob Jul 09 '17 at 21:43

2 Answers2

1

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

.

Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
  • 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 – Surreal Jul 09 '17 at 21:39
0
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

Abhishek Parmar
  • 145
  • 1
  • 11