title: Change favicon dynamically based on browser
body: <p>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 </p>
  
  <pre><code>&lt;link rel="icon" href="animated_favicon.gif" type="image/gif" &gt;
  &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  </code></pre>
  
  <p>I can probably detect the outdated browsers with a</p>
  
  <pre><code>navigator.userAgent.indexOf(//unfitBrowswer);
  </code></pre>
  
  <p>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?</p>
  
  <p>Slightly different than linked duplicate due to location in angular as opposed to a pure JS script that can be run on startup</p>