html - 本地(文件 ://) website favicon works in Firefox, 不在 Chrome 或 Safari 中 - 为什么?

标签 html google-chrome webkit cross-browser favicon

问题

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

详情

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

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

由于在通过 http:// 访问时可以使用 favicon,我怀疑我包含它的方式有问题,但你永远不知道...

更新

我发现一些论坛帖子(不太正式)暗示这是设计使然,但没有一个给出理由。另外,听起来某些版本的 IE 也有同样的问题。本地网站图标是否存在安全风险? (例如,我知道某些浏览器存在本地 cookie 问题。)

免责声明:似乎有很多类似的问题,但我还没有找到这个问题。 (事实上​​ ,我的问题与 this one 基本相同,但那里的答案都不适合我。)

最佳答案

您可以使用图像的 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" />

进入<head> html 文件的一部分。
可以接收 Base64 数据,例如 favicon.cc

关于html - 本地(文件 ://) website favicon works in Firefox, 不在 Chrome 或 Safari 中 - 为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11221292/

相关文章:

html - 左对齐 div,然后居中对齐底部文本

javascript - 在节点的子树中查找 DOM 节点?

javascript - 实现货币格式 Chromecast Sender Chrome

html - 我将如何制作我的 q 和这样的页面 : http://www. text-link-ads.com/r/faq

html - Chrome + Safari 不透明度过渡错误创建 st

html - 为什么我的 slider 在 Firefox 中显示不正确?

javascript - Webkit JavaScript 引用

CSS: transition: left/top GPU 加速了吗?

ios - 在 WKWebView 中禁用放大手势

javascript - 将一个图像拖到另一个图像上并将其保存为一个图像(如光增强现实)