如何阻止HTTP请求只是一个图标?

每个人都知道如何在HTML中设置favicon.ico链接:

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

但是对于一个只有几个字节的小图标，我们需要另一个可能会降低速度的HTTP请求，这是愚蠢的。

所以我想知道，我怎么能让favicon的一部分可用的精灵(例如，background-position=0px -200px;)，可以作为一个logo在网站的其余部分，以加快网站的速度，并节省宝贵的和宝贵的HTTP请求。我们如何将其与我们的标志和其他艺术品一起放入现有的精灵图像中?

当前回答

这并不是对这个问题的真正回答，而只是对Marcel和yahelc给出的答案的赞扬。我为404图标问题提供了一个优雅的解决方案。

一些应用程序和浏览器会检查favicon.ico文件，如果在站点根目录中没有找到图标，您可以简单地用204响应头响应请求。

Apache的例子:

Apache选项一(也是我最喜欢的)，在你的.htacces或.conf中简单的一行代码:

Redirect 204 /favicon.ico

Apache选项二:

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

Stoyan Stefanov写了一篇不错的博客文章供进一步阅读。

2012-07-26 01:14:12

其他回答

好观点，好想法，但不可能。favicon需要是一个单独的、独立的资源。没有办法将它与另一个图像文件合并。

2011-03-04 22:19:51

对@yc的回答的一个小改进是从通常使用和缓存的JavaScript文件中注入base64编码的favicon，并通过在相关元标记中提供数据URI来抑制请求favicon.ico的标准浏览器行为。

这项技术避免了额外的http请求，并且被证实适用于Windows 7上最新版本的Chrome、Firefox和Opera。然而，至少在ie9中它似乎不能工作。

文件index . html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

文件script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JavaScript code would normally be in here too. */

演示:turi.co / / favicon.html

2011-04-06 14:57:52

我认为在大多数情况下，它不会导致另一个HTTP请求，因为这些请求通常在第一次访问后被转储到浏览器的缓存中。

这实际上比任何提出的“解决方案”都更有效。

2011-03-18 09:56:03

您可以使用8位PNG图像代替ICO格式，以获得更小的数据占用。你唯一需要改变的是使用“data:image/png”而不是“data:image/x-icon”MIME类型头:

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

“type”属性可以是“image/png”或“image/x-icon”。两者都对我有用。

您可以使用GIMP将ICO转换为8位PNG或转换:

convert favicon.ico -depth 8 -strip favicon.png

并使用base64命令将PNG二进制文件编码为base64 -string:

base64 favicon.png

2013-10-31 11:53:11