Html 本地（file://）网站图标在 Firefox 中有效，而不是在 Chrome 或 Safari 中-为什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11221292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
提问by Matthew Adams
The Question
问题
When my website is local (using the file://protocol), the favicon doesn't show up in Chrome or Safari, but it works in Firefox (all on a mac). However, when the exact same site is actually hosted, the favicon works fine in all of the browsers I tried. Why do the webkit browsers not display local favicons?
当我的网站是本地网站（使用file://协议）时，图标不会显示在 Chrome 或 Safari 中，但它可以在 Firefox 中工作（全部在 Mac 上）。但是，当实际托管完全相同的站点时，该图标在我尝试过的所有浏览器中都可以正常工作。为什么 webkit 浏览器不显示本地图标？
Details
细节
The favicon.ico file is in the same directory as the index.html page. I am using the following code, although I've tried several variations of it:
favicon.ico 文件与 index.html 页面位于同一目录中。我正在使用以下代码，尽管我已经尝试了它的几种变体：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Since the favicon works when accessed over http://, I doubt that there's something wrong with the way I'm including it, but you never know...
由于 favicon 在访问时有效http://，我怀疑我包含它的方式有问题，但你永远不知道......
Update
更新
I've found a few forum posts (nothing too official) that suggest that this is by design, but none of them give the rationale. Also, it sounds like some versions of IE have the same problem. Is there some security risk with local favicons? (I know that some browsers have issues with local cookies, for example.)
我发现一些论坛帖子（没什么太官方的）表明这是设计使然，但没有一个给出基本原理。此外，听起来某些版本的 IE 也有同样的问题。本地网站图标是否存在安全风险？（例如，我知道某些浏览器存在本地 cookie 问题。）
Disclaimer:There seem to be a ton of questions in a similar vein, but I haven't found exactly this one. (In fact I have basically the same question as this one, but none of the answers there worked for me.)
免责声明：似乎有很多类似的问题，但我还没有找到这个。（事实上，我的问题与这个问题基本相同，但没有一个答案对我有用。）
回答by n1k1ch
You can use Base64 data of an image. Put something like this:
您可以使用图像的 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" />
into the <head>section of an html file.
Base64 data can be received, for example, by favicon.cc
进入<head>html 文件的部分。
Base64数据可以接收，例如favicon.cc
回答by DominikAngerer
Local file://and chrome:
本地file://和铬：
For a localfavicon in Chrome - according to an old thread found on linux commandit should be possible to place a local favicon with the file://if it's in the your /Downloads/directory. So I tried it like this:
对于Chrome 中的本地收藏夹图标 - 根据在linux 命令上找到的旧线程，file://如果它在您的/Downloads/目录中，应该可以将本地收藏夹图标放置在您的目录中。所以我这样试过：
<!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>
I don't have a apache or anything running. It's simply the way chrome can access local files using the file://. If I try using the favicon from another part of my filesystem it doesn't seems to work - so maybe that's a solution for chrome.
我没有运行 apache 或任何东西。这只是 chrome 可以使用file://. 如果我尝试使用文件系统另一部分的图标，它似乎不起作用 - 所以这可能是 chrome 的解决方案。
Local file://and Safari:
本地file://和野生动物园：
Still looking for a way - above code doesn't work for my up2date safari.
仍在寻找方法 - 以上代码不适用于我的 up2date safari。
Interesting topic's:
有趣的话题：
General troubleshooting guide for your favicons:
您的收藏夹的一般故障排除指南：
Have a look at: https://stackoverflow.com/a/16375622/1581725
回答by zessx
This is a known issue for years. Your code is right, and I don't think you'll find any way to allow Chrome or IE to include a favicon with a non-remotely way.
这是多年来的一个已知问题。您的代码是正确的，我认为您找不到任何方法来允许 Chrome 或 IE 以非远程方式包含网站图标。
Some time ago, I tried a lot of ways, none works, and I wasn't able to find any browser documentation on this point.
前段时间，我尝试了很多方法，都没有奏效，而且我在这一点上找不到任何浏览器文档。
<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" />
For Chrome, favicons are stored in a file : User\AppData\Local\Google\Chrome\User Data\Default\Favicons. We can guess local favicons aren't stored in.
对于 Chrome，收藏夹图标存储在一个文件中：User\AppData\Local\Google\Chrome\User Data\Default\Favicons. 我们可以猜测本地图标没有存储在。
回答by The Alpha
Once I've solved it using two lines of code
一旦我使用两行代码解决了它
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
and also keep the favicon.ico named exatly this and in the webroot folder, if it helps.
并将 favicon.ico 保留在 webroot 文件夹中，如果有帮助的话。
回答by osolldav
Well I have the problem similar with Google Chrome the favicon don't show correctly the problem was the .ico I was using was 16x16 and 32x32 I just used a bigger image and it works for all browsers.
好吧，我遇到了与 Google Chrome 类似的问题，图标无法正确显示问题是我使用的 .ico 是 16x16 和 32x32 我只是使用了更大的图像，它适用于所有浏览器。
回答by MonkandMonkey
I solved this by renaming favicon.icoas new_name.ico. And it works in Safari and Chrome.
我通过重命名favicon.ico为new_name.ico. 它适用于 Safari 和 Chrome。
<head>
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='logo.ico') }}">
</head>
回答by Noob
Works In Chrome All you need is a folder with the icon and the website then the html should look like this (MAKE SURE THE ICON IS NAMED favicon.ico !)
在 Chrome 中工作您只需要一个带有图标和网站的文件夹，然后 html 应该如下所示（确保图标名为 favicon.ico ！）
link rel='shortcut icon' type='image/x-icon' href='C:\Website/favicon.ico
link rel='shortcut icon' type='image/x-icon' href='C:\Website/favicon.ico
