每个人都知道如何在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请求。我们如何将其与我们的标志和其他艺术品一起放入现有的精灵图像中?
当前回答
正确的解决方案是使用HTTP管道。
HTTP管道是一种将多个HTTP请求写入到单个套接字而不等待相应响应的技术。只有HTTP/1.1支持管道，1.0中不支持。
它要求服务器支持它，但不一定参与其中。
HTTP管道需要客户端和服务器都支持它。符合HTTP/1.1的服务器需要支持流水线。这并不是说服务器必须通过管道处理响应，而是说如果客户端选择通过管道处理请求，服务器必须不会失败。
许多浏览器客户端在应该这样做的时候却没有这样做。
HTTP pipelining is disabled in most browsers. Opera has pipelining enabled by default. It uses heuristics to control the level of pipelining employed depending on the connected server. Internet Explorer 8 does not pipeline requests, due to concerns regarding buggy proxies and head-of-line blocking. Mozilla browsers (such as Mozilla Firefox, SeaMonkey and Camino), support pipelining however it is disabled by default. It uses some heuristics, especially to turn pipelining off for IIS servers. Konqueror 2.0 supports pipelining, but it's disabled by default.[citation needed] Google Chrome does not support pipelining.
我建议你尝试在Firefox中启用管道，或者直接使用Opera(不寒而栗)。
其他回答
我在这个页面上找到了一个有趣的解决方案。它是用德语写的，但你应该能看懂代码。
您将图标的base64数据放入外部样式表中，因此它将被缓存。在你的网站头部，你必须定义带有id的favicon，并且favicon被设置为该id的样式表中的背景图像。
link#icon {
background-image:url("data:image/x-icon;base64,<base64_image_data>");
}
还有HTML
<html>
<head>
<link id="icon" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/styles.css" />
...
</head>
<body>
...
</body>
</html>
这并不是对这个问题的真正回答，而只是对Marcel和yahelc给出的答案的赞扬。我为404图标问题提供了一个优雅的解决方案。
一些应用程序和浏览器会检查favicon.ico文件，如果在站点根目录中没有找到图标，您可以简单地用204响应头响应请求。
Apache的例子:
Apache选项一(也是我最喜欢的)，在你的.htacces或.conf中简单的一行代码:
Redirect 204 /favicon.ico
Apache选项二:
<Files "favicon.ico">
ErrorDocument 204 ""
</Files>
Stoyan Stefanov写了一篇不错的博客文章供进一步阅读。
这真的重要吗?
许多浏览器以低优先级加载favicon，这样它就不会阻塞页面加载，所以是的，这是一个额外的请求，但它不在任何关键路径上。
JavaScript解决方案很糟糕，因为JavaScript代码已经被检索和执行，下面所有的DOM元素将被阻止呈现，并且它不会减少请求的数量!
我认为在大多数情况下，它不会导致另一个HTTP请求，因为这些请求通常在第一次访问后被转储到浏览器的缓存中。
这实际上比任何提出的“解决方案”都更有效。
好观点，好想法，但不可能。favicon需要是一个单独的、独立的资源。没有办法将它与另一个图像文件合并。
