网站图标拒绝在 IE 和 Chrome 中显示

Question

我正在尝试在 HTML 页面上添加一个网站图标，过去几个小时我一直在努力解决这个问题。 favicon 显示在 Firefox 上，但不显示在 IE、Chrome 或 Edge 上。我从本地文件启动网站（因此它没有托管在任何地方）。

这是我拥有的图标的代码 - 这是唯一有效的代码，而且仅在 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">

作为参考，我尝试了以下问题的答案，不幸的是无济于事：

How do I force a favicon refresh
Favicon not showing up
Favicon not showing on my website

我尝试过的事情：

我已经在 Chrome 清空缓存好几次了，但一点用都没有！
我还用不同的图片替换了网站图标，但它在这个页面上不起作用，尽管那个图标在另一个完全独立的页面上肯定有效。
删除 'href' 中前面的斜杠，但这也不起作用
按照 this bug from this question
根据上述链接问题的已接受答案中的建议，我已将图标引用更改为 <link rel="shortcut icon" href="http://cdn.sstatic.net/Whosebug/img/favicon.ico"> 以查看是否显示了 Whosebug 图标 - 再次 Chrome没有显示任何东西，但有趣的是 Firefox 也没有。

我要提的另一件事是网站图标都存储在根文件夹中，所以没有 URL 问题！

Answer 1

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

Answer 2

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

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

网站图标拒绝在 IE 和 Chrome 中显示

Favicons refusing to show in IE and Chrome

html

google-chrome

internet-explorer

firefox

favicon