每个人都知道如何在他们的HTML中设置一个图标.ico链接：
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
但愚蠢的是，对于一个只有几字节的小图标，我们还需要另一个可能影响速度的HTTP请求。
所以我想知道，我怎么能让这个图标成为一个可用的精灵（例如，）的一部分，它可以兼作网站其余部分的徽标，以加快网站速度并保存这个珍贵而有价值的HTTP请求。我们如何让它与我们的徽标和其他艺术品一起进入现有的精灵图像？background-position=0px -200px;
我认为在大多数情况下，它不会导致另一个HTTP请求，因为这些请求通常在首次访问后转储到浏览器的缓存中。
这实际上比任何提议的“解决方案”都更有效。
对@yc的答案的一个小改进是从通常无论如何都会使用和缓存的JavaScript文件中注入Base64编码的favicon，并且还通过在相关标记中为其提供数据URI来抑制浏览器请求的标准行为。favicon.icometa
这种技术避免了额外的http请求，并被确认可以在Windows 7上的最新版本的Chrome，Firefox和Opera中工作。但是，它似乎至少在Internet Explorer 9中不起作用。
<!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>
...
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. */
