任何可能的方法在网站中添加多个favicon

Question

如何为不同的浏览器添加多个单一的图标？

原因：

[Google Chrome] favicon在横轴与页面标题完美匹配，使“AT Drive”成为一个完整的句子！

[Mozilla Firefox]现在，您可以看到与水平轴匹配的“相同的图标”，它向下移动了一点

我想要的是什么：

在网站中插入关于浏览器的Multi-Favicon图标..

Answer 1

我无法想到任何纯粹的html / css解决方案，但您可以通过JavaScript更改favicon以指定浏览器。

例如检测浏览器是否为firefox（Detect all Firefox versions in JS），然后为其设置不同的favicon（Changing website favicon dynamically），因此最终代码看起来应该是这样的

<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>