如何为小图标保存另一个宝贵的 HTTP 请求？
每个人都知道如何在他们的 HTML 中设置 favicon.ico 链接：
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
但愚蠢的是，对于一个只有几个字节的小图标，我们还需要另一个可能会降低速度的 HTTP 请求。
所以我想知道，我怎样才能使网站图标成为可用精灵的一部分（例如，background-position=0px -200px;），它可以兼作网站其余部分的徽标，以加快网站速度并保存珍贵和有价值的东西HTTP 请求。我们怎样才能让它与我们的标志和其他艺术品一起进入现有的精灵图像？
data: 值和内联脚本。
我认为在大多数情况下它不会导致另一个 HTTP 请求，因为它们通常在第一次访问后被转储到浏览器的缓存中。
这实际上比任何提议的“解决方案”都更有效。
对 @yc's answer 的一个小改进是从通常会使用和缓存的 JavaScript 文件中注入 Base64 编码的网站图标，并通过在相关 { 4}标签。
这种技术避免了额外的 http 请求，并被证实可以在 Windows 7 上的最新版本的 Chrome、Firefox 和 Opera 中工作。但至少在 Internet Explorer 9 中似乎不起作用。
文件 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/up/favicon.html
HTTP Headers Response 中的字符几乎与我的图标大小相同！你觉得如何？
您可以尝试 data URI。没有 HTTP 请求！
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">
除非您的页面具有静态缓存，否则您的网站图标将无法被缓存，并且根据您的网站图标图像的大小，您的源代码可能会因此变得臃肿。
Data URI favicons 似乎可以在大多数现代浏览器中使用；我让它在 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]--> `
在你的根目录中包含 favicon.ico 文件，以覆盖将请求它的浏览器，因为对于那些浏览器，如果他们已经在检查，无论你做什么，你最好不要用 404 响应浪费 HTTP 请求.
您也可以只使用另一个受欢迎的网站的图标，该网站可能会缓存其图标，例如 http://google.com/favicon.ico，以便从缓存中提供。
正如评论者所指出的，仅仅因为你可以这样做并不意味着你应该这样做，因为有些浏览器会请求 favicon.ico，而不管我们设计的技巧如何。与执行 gzip 压缩、为静态内容使用远期过期标头、缩小 JavaScript 文件、将背景图像放入 sprite 或数据 URI 等操作所节省的成本相比，这样做所节省的开销是微不足道的，从 CDN 提供静态文件等。
<link rel> 元素，这应该是可能的。我什至见过 a game 以这种方式编程......但是它似乎也不能在 IE 中工作，而且它可能不会阻止默认的 /favicon.ico 查找请求
/favicon.ico，以盲目尝试定位它。因此，如果您忽略图标 <link>（稍后通过 Javascript 添加它），您可能只会让事情变得更糟。
2020 年的杀手级解决方案
这个解决方案必然是在最初提出问题九年后才出现的，因为直到最近，大多数浏览器还不能处理 .svg 格式的网站图标。
现在不是这样了。
请参阅：https://caniuse.com/#feat=link-icon-svg
1) 选择 SVG 作为 Favicon 格式
现在，在 2020 年 6 月，这些浏览器可以处理 SVG Favicon：
铬合金
火狐
边缘
歌剧
安卓版 Chrome
KaiOS浏览器
请注意，这些浏览器仍然不能：
苹果浏览器
苹果浏览器
火狐安卓版
尽管如此，考虑到上述情况，我们现在可以放心地使用 SVG Favicon。
2) 将 SVG 呈现为数据 URL
这里的主要目标是避免 HTTP 请求。
正如本页上的其他解决方案所提到的，一个非常聪明的方法是使用数据 URL 而不是 HTTP URL。
SVG（尤其是小型 SVG）非常适合 Data URL，因为后者只是纯文本（任何可能有歧义的字符都以百分比编码），而前者是 XML，可以写成一长串纯文本（带有少量百分比代码）非常简单。
3) 整个 SVG 是一个单一的 Emoji
注意此步骤是可选的。您的 SVG 可以是单个表情符号，但也可以很容易地成为更复杂的 SVG。
2019 年 12 月，Leandro Linares 是最早意识到 Chrome 已加入 Firefox 以支持 SVG Favicon 的人之一，值得尝试看看是否可以从 emoji 中创建 favicon：
https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/
利纳雷斯的预感是对的。
几个月后（2020 年 3 月），Code Pirate Lea Verou 意识到了同样的事情：
https://twitter.com/leaverou/status/1241619866475474946
网站图标再也不会一样了。
4）自己实施解决方案：
这是一个简单的 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" />
5）更多技巧（......这些不是你父母的网站！）
由于 Favicon 是 SVG，因此可以对其应用任意数量的滤镜效果（SVG 和 CSS）。
例如，除了上面的 White Unicorn Favicon，我们可以通过应用过滤器轻松制作 Black Unicorn Favicon：
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" />
16x16 32x32 64x64 128x128 作为原创海报，看到 9 年后人们仍然关心让生活更美好、更愉快、更活泼或更优雅的小事，真是令人振奋！ :)
<IMG src="data:image/svg..."> 已经工作了多年，我在 52 PlayingCards Custom Element 中使用它，我认为他们对 favicon 使用相同的解析代码。无需为 DataURI 转义所有内容，只需转义 # 并仅使用单引号。 xlink is deprecated，不是必需的。将数据 URI 降低到：data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text x='0' y='14'>🦄</text></svg>（在 Chrome 中测试）
20x20 并将 x,y 位置调整为 -1,15.5 之后，我会说这是使用表情符号字符时的起点：href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect width='100%' height='100%' fill='hotpink'/><text x='-1' y='15.5' stroke='red'>😎</text></svg>"（在 Chrome 和 FireFox 上测试）Firefox 尊重表情符号图标颜色设计，Chrome 没有。
xlink:href 现在已弃用，但无论如何我已将它从它出现在上面的任何地方删除，因为它与网站图标 SVG 无关。另外，我看到您用空白文字替换 %20 的论点，但我不情愿......因为，由外行人复制粘贴和编辑，空白文字可以成为换行文字等。
您可以使用 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" />
我在 this page 上找到了一个有趣的解决方案。它是德语的，但您将能够理解代码。
您将图标的 base64 数据放入外部样式表中，因此它将被缓存。在您网站的头部，您必须使用 id 定义 favicon，并且在该 id 的样式表中将 favicon 设置为 background-image。
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>
好点子和好主意，但不可能。一个网站图标需要是一个单独的、独立的资源。没有办法将它与另一个图像文件结合起来。
/favicon.ico 是浏览器自动查看的地方。现在真正的坏消息来了：如果 favicon 不存在，则意味着错误 404 惩罚也会导致轻微延迟！！似乎无法逃离这个网站图标地牢。它们是如此之小，但哦，如此强大……该死的 :)
真的有关系吗？
许多浏览器将 favicon 加载为低优先级，这样它就不会阻止页面加载，所以是的，这是一个额外的请求，但它不在任何关键路径上。
公认的解决方案是可怕的，因为在检索并执行 JavaScript 代码之前，下面的所有 DOM 元素都将被阻止呈现，并且不会减少请求的数量！
正确的解决方案是使用 HTTP pipelining。
HTTP 流水线是一种将多个 HTTP 请求写入单个套接字而不等待相应响应的技术。流水线仅在 HTTP/1.1 中受支持，在 1.0 中不支持。
要求服务器支持，但不一定参与。
HTTP 流水线要求客户端和服务器都支持它。需要符合 HTTP/1.1 的服务器来支持流水线。这并不意味着服务器需要管道响应，但如果客户端选择管道请求，则要求它们不会失败。
许多浏览器客户端不这样做，但他们应该这样做。
大多数浏览器都禁用了 HTTP 管道。 Opera 默认启用流水线。它使用启发式方法来控制所使用的流水线级别，具体取决于连接的服务器。 Internet Explorer 8 不会对请求进行管道传输，因为担心代理有问题和线头阻塞。 Mozilla 浏览器（例如 Mozilla Firefox、SeaMonkey 和 Camino）支持流水线，但默认情况下它是禁用的。它使用一些启发式方法，尤其是关闭 IIS 服务器的流水线。 Konqueror 2.0 支持流水线，但默认禁用。[需要引用] Google Chrome 不支持流水线。
我建议您尝试在 Firefox 中启用流水线并在那里尝试，或者只使用 Opera（颤抖）。
这并不是问题的真正答案，而只是为了补充 Marcel 和 yahelc 给出的答案。我为 404 favicon 问题提供了一个优雅的解决方案。
一些应用程序和浏览器会检查 favicon.ico 文件，如果在站点根目录中找不到该图标，您可以简单地使用 204 response 标头响应请求。
阿帕奇示例：
Apache 选项一（也是我最喜欢的），在你的 .htacces 或 .conf 中的一个简单的单行：
Redirect 204 /favicon.ico
阿帕奇选项二：
<Files "favicon.ico">
ErrorDocument 204 ""
</Files>
为了进一步阅读，有一个很好的blog post by Stoyan Stefanov。
这是一个好主意，但如果谷歌没有在他们的主页上做到这一点，我敢打赌它（目前）不能做到。
抱歉，您不能将网站图标与其他资源结合使用。
这意味着您基本上有两种选择：
如果您对没有网站图标的网站感到满意 - 您可以只使用 href 指向已加载的非图标资源（例如，样式表、脚本文件，甚至是一些受益于 pre 的资源） -获取）。 （我的简短测试表明，这适用于大多数（如果不是全部）主流浏览器。）接受额外的 HTTP 请求并确保您的 favicon 文件具有激进的 HTTP 缓存控制标头设置。 （如果您有其他网站在您的控制之下，您甚至可以让他们偷偷地预加载该网站的图标 - 以及其他静态资源。）
PS 无效的创意解决方案：
奇怪的 CSS 数据 URI 技巧（由评论者 Felix Geenen 链接）不起作用。
使用 JavaScript 执行 favicon 元素的延迟注入（如用户 yc 所建议的那样）可能只会让事情变得更糟——导致两个 HTTP 请求。
这是最简单的方法：
<!DOCTYPE html><html><head>
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>
它代表什么图标？下面回答！
您可以使用 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 或 convert 将 ICO 转换为 8 位 PNG：
convert favicon.ico -depth 8 -strip favicon.png
并使用 base64 命令将 PNG 二进制文件编码为 Base64 字符串：
base64 favicon.png
