本地（文件：//）网站图标在 Firefox 中工作，而不是在 Chrome 或 Safari 中 - 为啥？

Posted

技术标签:

【中文标题】本地（文件：//）网站图标在 Firefox 中工作，而不是在 Chrome 或 Safari 中 - 为啥？【英文标题】：local (file://) website favicon works in Firefox, not in Chrome or Safari- why?本地（文件：//）网站图标在 Firefox 中工作，而不是在 Chrome 或 Safari 中 - 为什么？ 【发布时间】：2012-06-28 14:16:37 【问题描述】：

问题

当我的网站是本地的（使用file:// 协议）时，图标不会显示在 Chrome 或 Safari 中，但它可以在 Firefox 中运行（全部在 Mac 上）。但是，当实际托管完全相同的站点时，该网站图标在我尝试过的所有浏览器中都可以正常工作。为什么 webkit 浏览器不显示本地网站图标？

详情

favicon.ico 文件与 index.html 页面位于同一目录中。我正在使用以下代码，尽管我已经尝试了它的几种变体：

   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

由于通过http:// 访问网站图标时有效，我怀疑我包含它的方式有问题，但你永远不知道...

更新

我发现一些论坛帖子（不是太官方）表明这是设计使然，但没有一个给出理由。此外，听起来某些版本的 IE 也有同样的问题。本地网站图标是否存在安全风险？ （例如，我知道某些浏览器存在本地 cookie 问题。）

免责声明：似乎有很多类似的问题，但我还没有完全找到这个问题。 （事实上​​我和this one 有基本相同的问题，但那里的答案都对我有用。）

【问题讨论】：

这是 chromium 网站上对这个问题的讨论。 code.google.com/p/chromium/issues/detail?id=51270 我感觉不支持本地网站图标，但我不知道为什么。我敢打赌，其他网络开发新手也会遇到这种情况，所以我要悬赏。 您不能混合使用 file:// 和 http:// 协议。他们的行为在很多方面都不同。 @yunzen 混合它们是什么意思？ 我应该说，那个 file:// 不是协议：(en.wikipedia.org/wiki/File_URI_scheme) 【参考方案1】：

您可以使用图像的 Base64 数据。像这样写：

<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD9/f0F/Pz8DP///wD///8P////Dv///xL///8P////A////wD///8A/v7+Cf///wX///8A////APv7+wr9/f0D+/v7Dv///wb///81+vv8i/v7/Iv3+PqL4+nxi+ru9JHy9Piu5+zzru3w9ZD+/v5x/v7+H////wr///8A9/f3H/7+/g7///8J////HNDX5Pyaq8j/m6zJ/5esy/+QpcX/larK/5uwzv+MoMH/mqrG/5qlv+7Q0Nty/f3+Af///wD///8A/v7+A////wz+/v6b2d/q/4abvf+Emr7/jKHD/5Gnyf+Uqsz/fpW5/4mXuP/U1OL/e3ui+MPE0l7///8A////AP///wD///8P////Xa680/9/lrr/kafJ/5yy0/+WrM7/nbPT/52uyv+ktM7/1NTi/8LC1f+lpr3n////AP///wD///8A////AP7+/mDo7PL/ytPi/5yv0fehsuXuuMvl0Kq81drS2uf8+/z9bff3+SG5uM1r8vL1ff///wD///8A////AP///wr+/v4H/v7+jufq8umIg/Sut7L9YKul/W7PzvlMnZn03Ozq/x/+/v4H////AP///wD///8A////AP///wD///8A5OH/IpuS/pF3cfPploz/hH5y/6F/dP+gl47/gkw++e7Hwv9Fta//XPj4/gf///8A////AP///wD///8A+vn/BoyB/pGlnf5vfHfxy4mA/JlIOf/lmZD+f1lK/89kWPrPmZD+f9zY/yu3sP5ar6j/ZP///wD///8A6uj/GbSt/l6imv9yVkf/1HBm+MJ5eOrlhX/1s2JY+dRpYPfPv7/zb4+F/41WR//Uloz/hI6E/47///8A////AOro/xmnn/9teW3/qH5y/6HKxf9B9/n7Fc3N9VfMyvlQraj6cbWv/1zj4f4h2tf/Lks7/+NmWP+/0s7/OP///wCvqP9kjoT/jo6E/46Sif+I+vn/Bt3a/ypsX/+5////AH90/6Dj4f4h0Mz/OrWv/1yyq/9gkon/iNzY/yv///8A19P/MvLx/g////8A////APX0/wxvYv6119P/MtzY/ytmWP+/oZj/df///wBQQP/dt7D+Wv///wD///8A////AP///wD///8A////AKyk/2makf9+UUL/283J/z/l4/8f1dH/M////wD///8At7D+Wv39/gH///8A////AP///wD///8A////AP///wDa1/8u2tf/LtrX/y719P8M////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A//8AAOAfAADgBwAA4AMAAPABAADwHwAA8d8AAPAfAADonwAA8CEAAOf5AADGvQAA/bcAAP3/AAD//wAA//8AAA==" rel="icon" type="image/x-icon" />

进入 html 文件的 &lt;head&gt; 部分。 Base64数据可以接收，例如favicon.cc

【讨论】：

不错！另外，在最终站点上使用它还有一个额外的好处，那就是摆脱额外的 http 请求并稍微加快速度。 谢谢！这在 chrome/FF 中效果很好，但在 IE10 中似乎不起作用。有什么建议吗？ 这样做的明显缺点是它从不缓存。您必须将其包含在您发送的每个页面中。【参考方案2】：

本地 file:// 和 chrome：

对于 Chrome 中的 local 图标 - 根据在 linux command 上找到的旧线程，如果它位于您的 /Downloads/ 目录中，则应该可以将带有 file:// 的本地图标放在.所以我这样尝试：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="shortcut icon" type="image/x-icon" href="file://localhost/Users/dominikangerer/Downloads/favicon.ico">
</head>
<body>
    <h1>Testing</h1>
</body>
</html>

我没有运行 apache 或任何东西。这只是 chrome 使用file:// 访问本地文件的方式。如果我尝试使用文件系统另一部分的网站图标，它似乎不起作用 - 所以这也许是 chrome 的解决方案。

本地 file:// 和 Safari：

仍在寻找方法 - 上面的代码不适用于我的 up2date safari。

有趣的话题：

Security in depth loca web pages (Chromium Blog)

网站图标的一般故障排除指南：

看看：https://***.com/a/16375622/1581725

【讨论】：

很好的一般网站图标故障排除技巧，但请不要在每个相关问题上发送您的最佳答案。这个答案听起来你没有真正阅读我的问题或已经在这里的其他答案。 我当然读过你的问题 - 目前也在寻找详细信息，为什么它不能在 safari 上运行。当然还有你在file://开始时遇到的问题，我目前正在尝试。 仍然想通过上面的例子弄清楚为什么它不能在 safari 上运行。也许深入挖掘 safari 安全“世界”会给出一个很好且令人满意的答案。 我很惊讶下载目录得到了特殊处理。 +1 是的 - 这真的很奇怪，但是对 safari 使用相同的方法却行不通。我还添加了一篇关于语言环境文件安全 + 来自 chromium 的网站的有趣文章 - 这真的很有趣，因为它们还解释了其他浏览器的想法/解决方案【参考方案3】：

这是多年来的一个已知问题。您的代码是正确的，我认为您不会找到任何方法让 Chrome 或 IE 以非远程方式包含 favicon。

前段时间，我尝试了很多方法，都没有奏效，也找不到任何关于这一点的浏览器文档。

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.png" type="image/png" />
<link rel="shortcut icon" href="C:/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file:///C:/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file:///C|/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://localhost/C:/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://127.0.0.1/C:/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://localhost/C|/favicon.ico" type="image/x-icon" />

对于 Chrome，网站图标存储在一个文件中：User\AppData\Local\Google\Chrome\User Data\Default\Favicons。我们可以猜测本地网站图标没有存储在其中。

【讨论】：

【参考方案4】：

一旦我用两行代码解决了它

<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

如果有帮助的话，还要将 favicon.ico 命名为 exatly 和 webroot 文件夹。

【讨论】：

这对我不起作用，虽然我看到一些论坛帖子建议使用这样的两个标签使 favicon.ico 在所有浏览器中都能很好地运行（似乎 IE 喜欢 "shortcut icon" 和大多数其他浏览器不要）。【参考方案5】：

好吧，我遇到了与 Google Chrome 类似的问题，图标无法正确显示问题是我使用的 .ico 是 16x16 和 32x32 我只是使用了更大的图像，它适用于所有浏览器。

【讨论】：

【参考方案6】：

我通过将favicon.ico 重命名为new_name.ico 解决了这个问题。它适用于 Safari 和 Chrome。

<head>
    <link rel="icon" type="image/x-icon" href=" url_for('static', filename='logo.ico') ">
</head>

【讨论】：

【参考方案7】：

在 Chrome 中工作您只需要一个带有图标和网站的文件夹，然后 html 应该如下所示（确保图标被命名为 favicon.ico！）

link rel='快捷方式图标' type='image/x-icon' href='C:\Website/favicon.ico

【讨论】：

以上是关于本地（文件：//）网站图标在 Firefox 中工作，而不是在 Chrome 或 Safari 中 - 为啥？的主要内容，如果未能解决你的问题，请参考以下文章

用于在Firefox中工作的网站的Facebook Messenger，而不是Chrome

如何使 event.srcElement 在 Firefox 中工作，这是啥意思？

如何让我的网站在 Firefox 的书签工具栏中显示一个网站图标？

jquery cycle.js 分页器图形在 Safari、Firefox、Chrome 和 Opera 中工作，但在 IE 中消失

如何修复下载菜单无法在Firefox量程中工作

JSONP 在 Chrome 中工作但在 Firefox/IE 中不工作？