如何为特定浏览器添加特定选项卡图标

时间:2016-10-29 01:50:51

标签: html5

我一直在网上搜索我如何为特定浏览器添加特定标签图标但我找不到任何答案,可能是我的问题不清楚,所以我想改变网站图标颜色(通过选择正确的图标)适合浏览器,例如:googlechrome(图标为红色),firefox(图标为蓝色),等等。

有这样的事情:

<link rel="icon" type="image/png" href="icon.png?v=2 <!-- choose the browser here-->" sizes="48x48">

请帮助。

1 个答案:

答案 0 :(得分:1)

在您的JavaScript中:

function writeIconElement() {
  var iconUrl = 'icon-default.png';
  var browser = 'Chrome';

  if (browser === 'Chrome') {
      iconUrl = 'icon-chrome.png';
  }

  var link = document.createElement('link');
  link.setAttribute('rel', 'icon');
  link.setAttribute('type', 'image/png');
  link.setAttribute('sizes', '48x48');
  link.setAttribute('href', iconUrl);
  document.head.appendChild(link);
}

在您的HTML中:

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body onload="writeIconElement()">
   <h1>Hello Plunker!</h1>
</body>

有多种方法可以检测浏览器,具体取决于您定位的浏览器。