根据浏览器动态更改网站图标答案

【问题标题】：Change favicon dynamically based on browser根据浏览器动态更改网站图标
【发布时间】：2017-07-09 20:51:04
【问题描述】：

我正在尝试想出一种方法来根据用户浏览器将我的网站图标设置为动画/静态。两个 favicon 图标是

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

我大概可以用 a 检测过时的浏览器

navigator.userAgent.indexOf(//unfitBrowswer);

但是这段代码应该驻留在项目中的哪个位置来设置网站图标呢？我应该创建一个所有组件都使用的服务，还是在 main.ts 中的某个地方或其他地方？

由于角度位置而不是可以在启动时运行的纯 JS 脚本，因此与链接副本略有不同

【问题讨论】：

【解决方案1】：

您可以在 Angular 中使用 jquery 来执行此操作。一旦你得到浏览器配置。在你的 App Component 中调用 ngOnInit 这个方法

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

或者你甚至可以利用 Renderer 2 来改变运行时的 href 标记都可以工作

【讨论】：

【解决方案2】：

navigator.userAgent.indexOf(//unfitBrowswer);

在 main.js 文件中使用您需要为此使用js....当您检测到浏览器的版本时，更改favicon链接的href属性

【讨论】：