网页图标拒绝在 IE 和 Chrome 中显示答案

【问题标题】：Favicons refusing to show in IE and Chrome网页图标拒绝在 IE 和 Chrome 中显示
【发布时间】：2016-07-31 15:39:41
【问题描述】：

我正在尝试在 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">

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

我尝试过的事情：

我已经在 Chrome 上多次清空缓存，但根本没有帮助！
我还将网站图标替换为不同的图片，但它在此页面上不起作用，尽管该网站图标肯定可以在另一个完全独立的页面上使用。
删除“href”中前面的斜杠，但这也不起作用
按照this bug 从this question 的建议，将“href”更改为指向我的下载文件夹
正如上述链接问题的已接受答案中所建议的那样，我已将图标引用更改为 <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"> 以查看是否显示了 StackOverflow 图标 - Chrome 再次没有显示任何内容，但有趣的是也没有火狐。

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

【问题讨论】：

也许问题出在图标本身？
@AhmadAlfy 我也有这样的想法，所以我尝试在另一个完全独立的页面中使用该图标并且它起作用了。我还尝试用那个页面替换一个图标（我知道它在 Chrome 中可以正常工作），但它没有显示在这个页面上，所以某处的代码肯定有问题
您是否尝试过将它们放入最小的 apache 安装并在那里进行测试？
@JeffreyColeman 我不知道该怎么做，但我会调查一下 - 感谢您的建议！
如果你使用的是 eclipse，有一个向导可以制作一个简单的 http 服务器

标签： html google-chrome internet-explorer firefox favicon

【解决方案1】：

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

【讨论】：

这对我来说似乎是最合理的解释！
几乎解决了（IE 仍然不玩球，但这是意料之中的！）。我已经在下面发布了我的答案，但您实际上更好地回答了这个问题，所以我将其保留为已接受；）再次感谢您的帮助！

【解决方案2】：

我从this answer 找到了部分解决方案。我发现如果我使用 JQuery 设置图标，那么无论它是否是本地文件，它都会显示在 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);

【讨论】：