Question

我试图在HTML页面上添加一个favicon，我花了几个小时试图解决这个问题。 favicon出现在Firefox上，但不出现在IE，Chrome或Edge上。我是从本地文件启动网站的（因此它没有在任何地方托管）。

以下是我所拥有的favicon的代码 - 这是唯一有效但仅在Firefox中的代码：

<link rel="shortcut icon" type="image/png" href="/favicon-32x32.png?v=2"/>
<link rel="shortcut icon" type="image/png" href="/favicon-16x16.png?v=2"/>
<link rel="shortcut icon" href="favicon.ico?v=2" type="image/icon">
<link rel="icon" href="favicon.ico?v=2" type="image/icon">

作为参考，我已经尝试过以下问题的答案，但遗憾的是无济于事：

我尝试过的事情：

我在Chrome上多次清空缓存，但这根本没有帮助！
我还将favicon替换为不同的图片，但它并不适用于此页面，尽管该图标肯定适用于另一个完全独立的页面。
删除＆＃39; href＆＃39;中的前一个斜杠，但不起作用
更改＆＃39; href＆＃39;从this bug

this question

正如上述相关问题的已接受答案所示，我已将图标引用更改为<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">以查看是否显示了StackOverflow图标 - Chrome再次显示没有显示任何内容，但有趣的是Firefox也没有。

我应该提到的另一件事是，favicons都存储在根文件夹中，因此没有URL问题！

Answer 1

这似乎是Chrome上本地托管网站的错误？ https://bugs.chromium.org/p/chromium/issues/detail?id=51270

Answer 2

我从this answer找到了部分解决方案。我发现如果我使用JQuery设置favicon ，那么它将显示在Chrome（和Firefox）上，无论它是否是本地文件。这是代码：

var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.stackoverflow.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);

Favicons拒绝在IE和Chrome中显示

2 个答案: