CODEWITHSUNDEEP
html
phoenix
phoenix

Reputation: 391

how to put specific tab icon for specific browser

I have been searching on the internet about how I can put specific tab icon for specific browser but I could not find any answer,it could be that my question is not clear,so I want to change website icon color (by choosing the right icon) to fit with browser,example: googlechrome (icon is red),firefox(icon is blue),...etc.

is there any thing like this:

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

any help please.

Upvotes: 0

Views: 70

Answers (1)

Dan Wilson
Dan Wilson

Reputation: 4047

In your 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);
}

In your HTML:

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

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

There are a variety of ways to detect the browser, depending on which browsers you are targeting.

Upvotes: 1

Related Questions