每个人都知道如何在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请求。我们如何将其与我们的标志和其他艺术品一起放入现有的精灵图像中?
当前回答
这真的重要吗?
许多浏览器以低优先级加载favicon，这样它就不会阻塞页面加载，所以是的，这是一个额外的请求，但它不在任何关键路径上。
JavaScript解决方案很糟糕，因为JavaScript代码已经被检索和执行，下面所有的DOM元素将被阻止呈现，并且它不会减少请求的数量!
其他回答
这是个好主意，但如果谷歌在他们的主页上还没有这样做，我敢打赌它(目前)也不会这样做。
我认为在大多数情况下，它不会导致另一个HTTP请求，因为这些请求通常在第一次访问后被转储到浏览器的缓存中。
这实际上比任何提出的“解决方案”都更有效。
我在这个页面上找到了一个有趣的解决方案。它是用德语写的，但你应该能看懂代码。
您将图标的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>
对@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
正确的解决方案是使用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(不寒而栗)。
