是不是很愚蠢，一个小的图标需要另一个HTTP请求？ 如何使favicon进入精灵？
大家都知道如何在HTML中设置一个favicon.ico链接：
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon" /> 但是我认为，对于一个很小的几个字节的图标来说，你还需要另一个HTTP请求 。 所以我想知道，为了加快和保存这个有价值的HTTP请求，我怎么能让这个图像成为精灵（例如background-position = 0px-200px;）的一部分：我如何解决这个问题并将其融入我的其余部分现有的图像精灵与我的标志和我的其他艺术品？
指向favicon.ico的机器人，瀑布图上的item.31，是我的宠物ZAM，他经常更快乐，他有一个好点让我知道它的时间在networking上的一些创意升级，虽然他和我不'不同意他的服装，我觉得今天有点傻…
@ yc答案的一个小改进是从一个JavaScript文件中注入base64编码的favicon，而这个文件通常会被使用和caching，并且通过在相关的meta标签中提供一个数据URI来抑制标准浏览器的请求favicon.ico行为。
这种技术避免了额外的http请求，并且确认可以在Windows 7的最新版本的Chrome，Firefox和Opera上运行。但至less在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 JS would normally be in here too. */
演示： turi.co/up/favicon.html
我认为，大多数情况下，它不会导致另一个HTTP请求，因为这些请求通常会在第一次访问后转储到浏览器的caching中。
这实际上比任何提议的“解决scheme”都更有效率。
你可以尝试一个数据URI。 没有HTTP请求！
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">
除非你的页面有静态caching，否则你的图标将无法被caching，并且根据你的图标的大小，你的源代码可能会因此而膨胀。
数据URI的图标似乎在大多数现代浏览器工作; 我在Mac上使用最新版本的Chrome，Firefox和Safari。 似乎没有在Internet Explorer中工作，并可能有一些版本的Opera。
如果您担心旧IE浏览器（现在可能不应该这么做），那么您可以添加一个IE浏览器条件注释，以传统的方式加载实际的favicon.ico，因为旧IE浏览器似乎不支持数据URI Favicons
`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /><![endif]--> `
- 将favicon.ico文件包含在你的根目录中，以覆盖那些将要求它的浏览器，因为对于那些浏览器，如果他们已经在检查你是否做了什么，那么你也可以不用404响应来浪费HTTP请求。
您也可以使用另一个受欢迎的网站的图标（可能会将其favicon图标caching），例如http://google.com/favicon.ico ，以便从caching中提供。
正如评论者指出的，只是因为你可以这样做并不意味着你应该，因为一些浏览器会请求favicon.ico而不pipe我们devise的技巧。 这样做可以节省大量的开销，比起使用gzip这样的工具节省的开支，使用静态内容的远期过期头文件，缩小JavaScript文件，将背景图片放入精灵或数据URI ，从CDN提供静态文件等。
你可以使用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" />
好点，好主意，但不可能。 一个图标需要成为一个单独的资源。 没有办法将它与另一个图像文件相结合。
我在这个页面上find一个有趣的解决scheme 这是德文，但你将能够理解代码。
您将图标的base64数据放入外部样式表中，以便将其caching。 在你的网站的头部，你必须定义一个id的favicon和favicon被设置为该id的样式表中的background-image 。
link#icon { background-image:url("data:image/x-icon;base64,<Daten>"); }
和HTML
<html> <head> ... <link id="icon" rel="shortcut icon" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="/style.css" /> <!--[if lt IE 8]> <style type="text/css"> link#icon { background-image:url("/favicon.ico"); } </style> <![endif]--> ... </head> <body> ... </body> </html>
正确的解决scheme是使用HTTPstream水线 。
HTTPstream水线技术是将多个HTTP请求写入单个套接字而不等待相应响应的技术。 stream水线只支持在HTTP / 1.1中，而不是在1.0中。
需要服务器支持，但不一定参与。
HTTPstream水线要求客户端和服务器都支持它。 HTTP / 1.1兼容服务器需要支持stream水线。 这并不意味着服务器需要传递响应，但是如果客户端select传输请求，则不需要失败。
许多浏览器客户端不应该这样做。
大多数浏览器都禁用HTTPpipe道。
- Opera默认启用stream水线。 它使用启发式来控制所使用的stream水线级别，取决于连接的服务器。
- Internet Explorer 8不会pipe理请求，因为担心有问题的代理和头部阻塞。
- Mozilla浏览器（如Mozilla Firefox，SeaMonkey和Camino）支持stream水线，但默认情况下它是禁用的。 它使用了一些启发式的方法，特别是closuresIIS服务器的stream水线。
- Konqueror 2.0支持stream水线，但默认情况下它是禁用的。[需要的引证]
- 谷歌浏览器不支持stream水线。
我会build议你尝试在Firefox中启用stream水线，并尝试在那里，或者只是使用Opera（不寒而栗）。
这是一个好主意，但是如果谷歌没有在他们的主页上完成它，我打赌它不能（当前）完成
真的有关系吗？
许多浏览器加载favicon作为一个低优先级，所以它不会阻止页面加载，所以是的，这是一个额外的请求，但它不在任何关键path。
被接受的解决scheme是可怕的，因为直到JS已经被检索和执行，下面的所有DOM元素将被阻止呈现，并且不会减less请求的数量！
这不是一个真正的问题的答案，而只是为了恭维Marcel和yahelc给出的答案，我提供了一个优雅的解决scheme，404的favicon问题。
由于某些应用程序和浏览器以及不检查favicon.com的网站，如果在网站根目录中找不到该图标，您可以简单地使用204响应标题响应该请求。
Apache例子：
Apache的选项之一（也是我最喜欢的），在.htacces或.conf中简单的一行：
Redirect 204 /favicon.ico
Apache选项二：
<Files "favicon.ico"> ErrorDocument 204 "" </Files>
为了进一步阅读，Stoyan Stefanov在http://www.phpied.com/204-no-content/
我很抱歉，但是你不能把favicon和其他资源结合起来。
这意味着你基本上有两个select：
-
如果您对自己的网站没有使用collections夹的信息感到满意 – 那么您可以将
href指向已经被加载的非图标资源（例如，样式表，脚本文件，甚至是某些资源，牵强。）
（我的简短testing表明，即使不是全部，主stream浏览器也能正常运行。） -
接受额外的HTTP请求，并确保您的图标文件具有积极的HTTPcaching控制头设置。
（如果你有其他网站在你的控制之下，你甚至可能会让他们偷偷地预载本网站的图标 – 以及其他静态资源。）
PS创意解决scheme， 将无法正常工作 ：
- 奇怪的CSS数据 – URI技巧（由评论者Felix Geenen连接） 不起作用 。
- 使用Javascript执行favicon
<link>元素的延迟注入（如用户@yc所build议的）可能会使事情变得更糟 – 通过产生两个 HTTP请求。
您可以使用8位PNG而不是ICO格式来实现更小的数据占用空间。 唯一需要改变的是使用“data：image / png”而不是“data：image / x-icon”MIMEtypes头文件：
<link href="data:image/png;base64,your-base64-encoded-string-goes-here" rel="icon" type="image/png" />
“type”属性可以是“image / png”或“image / x-icon”，都适用于我。
你可以转换ICO到8位PNG使用GIMP或转换：
convert favicon.ico -depth 8 -strip favicon.png
并使用base64命令将PNG二进制编码为base64string：
base64 favicon.png
页面上的每个图像都是一个单独的http请求。 所以没有什么悲惨的favicon需要一个。
这是最简单的方法：
<!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>
它代表什么图标？ 回答，并在下面投票！
