logo标签列表

本地（file://）网站在Firefox中可以使用收藏夹图标，但在Chrome或Safari中无法使用，为什么？

htmlgoogle-chromewebkitcross-browserfavicon
39

问题

当我的网站在本地（使用file://协议）时，Chrome和Safari中的favicon不会显示出来，但在Firefox上可以正常显示（都是在Mac上）。然而，当完全相同的网站实际上被托管时，所有我尝试过的浏览器中favicon都可以正常工作。为什么webkit浏览器不能显示本地favicon？

细节

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

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

由于在http://下访问页面时，网站图标可以正常显示，我怀疑我包含它的方式没错，但也不排除其他可能...

更新

我找到了一些论坛帖子（没有太官方的），它们表明这是有意设计的，但是没有给出理由。而且听起来IE的某些版本也存在同样的问题。本地favicon是否存在安全风险？（例如，我知道某些浏览器存在本地cookie的问题。）

免责声明：有很多类似的问题，但我并没有找到完全相同的。 （实际上我跟这个问题几乎一样，但那里的答案都对我无效。）

1
这里是关于该问题的讨论，位于Chromium网站上。http://code.google.com/p/chromium/issues/detail?id=51270 - Matthew Adams
我感觉本地网站图标不被支持，但我不确定原因。我敢打赌其他新手网页开发者也会遇到这个问题，所以我在这里设置了一个悬赏。 - Matthew Adams
@yunzen 你说的混合是什么意思？ - Matthew Adams
我不是说混淆，对不起。我是说交换。（抱歉，我不是母语者） - yunzen
1
我应该说，file://不是一个协议：（http://en.wikipedia.org/wiki/File_URI_scheme） - yunzen
显示剩余6条评论
7个回答
38

您可以使用图像的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文件的<head>部分。
例如，可以通过favicon.cc获取Base64数据。

1
不错！此外，在最终网站上使用它还有一个额外的好处，可以消除多余的“http”请求并稍微加快速度。 - Matthew Adams
谢谢！这在Chrome/FF中运行得很好，但在IE10中似乎无法工作。有什么建议吗？ - Alex Pritchard
5
显而易见的缺点是它永远无法被缓存。你必须在每个页面中都包含它。 - Ben
12

本地file://和Chrome:

根据在Linux命令上找到的旧帖子，为了在Chrome中使用本地图标，可以将本地图标放置在/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的解决方法。

enter image description here

本地 file://和 Safari：

仍在寻找方法-上面的代码对我最新的Safari不起作用。

有趣的话题：

您的网站图标的常规故障排除指南：

请查看：https://dev59.com/0WQo5IYBdhLWcg3wDLlj#16375622

1
良好的常规favicon故障排除提示，但请不要在每个有些相关的问题上垃圾邮件您的顶级答案。这个答案听起来像是你没有真正阅读我的问题或已经在这里的其他答案。 - Matthew Adams
我当然看到了你的问题 - 目前也在寻找详细信息，为什么它在Safari上无法工作。当然，我也正在尝试解决你遇到的以 file:// 开头的问题。 - DominikAngerer
仍然想弄清楚为什么以上示例在Safari上无法正常工作。也许深入研究Safari安全“世界”将会给出一个好的和令人满意的答案。 - DominikAngerer
我很惊讶下载目录被给予特殊处理。+1 - Matthew Adams
是的 - 这真的很奇怪，但是对于Safari使用相同的方法却不起作用。我还添加了一篇有关本地文件安全性和来自Chromium的网站的有趣文章 - 这真的很有趣，因为他们也解释了其他浏览器的想法/解决方案。 - DominikAngerer
仍然无法在Safari上运行 - 看起来目前没有使用file://的方法。抱歉。 - DominikAngerer
7

这是一个已知问题多年了。你的代码是正确的，我认为你不会找到任何一种方法来允许Chrome或IE在非远程方式下包含网站图标。

前段时间，我尝试了很多方法，但都没有成功，并且我也没有找到任何浏览器文档关于这一点的说明。

<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。我们可以猜测本地图标并没有存储。

2

我只需要两行代码就可以解决这个问题

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

如果有帮助的话，同时保持favicon.ico的文件名为exatly this并位于webroot文件夹中。

尽管我看到一些论坛帖子建议使用两个标签，像这样使用并不能让favicon.ico在所有浏览器上都正常显示（似乎IE喜欢“shortcut icon”，而大多数其他浏览器则不是）。但这对我没有用。 - Matthew Adams
当index.html在您的本地文件中时，在Safari 16.3中无法工作。 - skiss
2

我解决了这个问题，通过将favicon.ico重命名为new_name.ico。在Safari和Chrome中都可以正常工作。

<head>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='logo.ico') }}">
</head>
在 Safari 16.3 上对我没有用。 - skiss
1

我有一个类似于谷歌浏览器的问题，即网站图标无法正确显示。问题出在我使用的 .ico 文件只有16x16和32x32两种尺寸。我只需使用更大的图片，就可以让所有浏览器正常显示了。

-1

适用于Chrome浏览器，您只需要一个带有图标和网站的文件夹，然后HTML代码应该如下（确保图标命名为favicon.ico！）

link rel='shortcut icon' type='image/x-icon' href='C:\Website/favicon.ico

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接