每个人都知道如何在他们的 HTML 中设置 favicon.ico 链接：
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
但是对于一个只有几个字节的小图标，我们还需要另一个可能会降低速度的 HTTP 请求，这很愚蠢。
所以我想知道，我怎样才能使网站图标成为可用精灵（例如，background-position=0px -200px;）的一部分，它可以兼作网站其余部分的标志，以加快网站速度并保存宝贵的 HTTP 请求。我们如何才能将其与我们的徽标和其他艺术品一起放入现有的精灵图像中？
我认为在大多数情况下它不会导致另一个 HTTP 请求，因为它们通常在第一次访问后转储到浏览器的缓存中。
这实际上比任何提议的“解决方案”更有效。
对@yc 的回答的一个小改进是从通常会使用和缓存的 JavaScript 文件中注入 Base64 编码的图标，并且还favicon.ico通过在相关标签中提供数据 URI来抑制请求的标准浏览器行为meta。
这种技术避免了额外的 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. */
您可以尝试使用数据 URI。没有 HTTP 请求！
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">
除非您的页面具有静态缓存，否则您的网站图标将无法被缓存，并且根据您的网站图标图像的大小，您的源代码可能会因此变得臃肿。
数据 URI 图标似乎适用于大多数现代浏览器；我让它在 Mac 上的 Chrome、Firefox 和 Safari 的最新版本中运行。似乎无法在 Internet Explorer 中工作，也可能在某些版本的 Opera 中无法使用。
如果您担心旧的 Internet Explorer 版本（现在您可能不应该担心），您可以包含一个 Internet Explorer 条件注释，以传统方式加载实际的favicon.ico，因为似乎旧的 Internet Explorer不支持数据 URI 图标。
`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /><![endif]--> `
您也可以只使用另一个流行网站的图标，该网站的图标可能已被缓存，例如http://google.com/favicon.ico，以便从缓存中提供服务。
正如评论者指出的那样，仅仅因为您可以这样做并不意味着您应该这样做，因为无论我们设计什么技巧，某些浏览器都会请求 favicon.ico。与通过执行 gzip 压缩、使用远未来的静态内容过期标头、缩小 JavaScript 文件、将背景图像放入 sprite 或数据 URI 等操作所节省的开销相比，您通过这样做节省的开销是微不足道的，从CDN提供静态文件等。
2020年杀手级解决方案
这个解决方案必然是在最初提出这个问题九年后提出的，因为直到最近，大多数浏览器还不能处理.svg格式的网站图标。
现在已经不是这样了。
请参阅：https : //caniuse.com/#feat=link-icon-svg
现在，在 2020 年 6 月，这些浏览器可以处理SVG Favicon：
请注意，这些浏览器仍然不能：
尽管如此，考虑到上述情况，我们现在可以以合理的信心使用SVG Favicon。
这里的主要目标是避免 HTTP 请求。
正如此页面上的其他解决方案所提到的，一个非常聪明的方法是使用Data URL而不是HTTP URL。
SVG（尤其是小型 SVG）非常适合 Data URL，因为后者只是纯文本（带有任何潜在的歧义字符百分比编码），而前者是 XML，可以写成一长行纯文本（带有少量百分比代码）非常简单。
注意这一步是可选的。您的 SVG可以是单个表情符号，但也可以很容易地成为更复杂的 SVG。
2019 年 12 月，Leandro Linares是第一个意识到自从 Chrome 加入 Firefox 支持 SVG Favicon 以来，值得尝试看看是否可以从表情符号中创建一个 favicon：
https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/
利纳雷斯的预感是对的。
几个月后（2020 年 3 月），Code Pirate Lea Verou意识到了同样的事情：
https://twitter.com/leaverou/status/1241619866475474946
收藏夹图标再也不会一样了。
这是一个简单的 SVG：
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16">
<text x="0" y="14">🦄</text>
</svg>
这是与数据 URL相同的 SVG ：
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E
最后，这是作为 Favicon 的数据 URL：
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
由于 Favicon 是 SVG，因此可以对其应用任意数量的滤镜效果（SVG 和 CSS）。
例如，除了上面的白色独角兽图标，我们可以通过应用过滤器轻松制作黑色独角兽图标：
style="filter: invert(100%);"
黑色独角兽图标：
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
您可以使用 Base64 编码的图标，例如：
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />