Any Possible way to add more than one favicon in a website

Question

how to add more than a singe favicon for different browser?

Reason:

enter image description here

[Google Chrome] favicon matches perfectly at horizontal axis with page title to make "AT Drive" a complete sentence!

Mozilla Firefox

[Mozilla Firefox] Now here you can see the "Same favicon" miss matched the horizontal axis, it shifted little downwards

What i want:

To insert Multi-Favicon icons in a website with respect to browsers..

I have never tried this, but you can try to dynamically create favicon using a script according to which browser is making the request. — bansi, Nov 17 '13 at 12:21

score 1 · Accepted Answer · edited May 23 '17 at 10:31

I can`t think of any pure html/css solution but You can change favicon for specify browser via JavaScript.

For example detect if browser is firefox (Detect all Firefox versions in JS) and then set diferent favicon for it (Changing website favicon dynamically) so final code should look something like this

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

 <script type="text/javascript">

    if (/firefox/i.test(navigator.userAgent)) {
        document.getElementById("favicon").href = "favicon-firefox.png";
    }

</script>

Any Possible way to add more than one favicon in a website

Reason:

What i want:

1 Answers1