本文共 3226 字，大约阅读时间需要 10 分钟。
本文翻译自：
Everybody knows how to set up a favicon.ico link in HTML: 每个人都知道如何在HTML中设置favicon.ico链接：
But I think it is just silly that for a tiny several-byte icon you need yet another HTTP request . 但是我认为，对于一个只有几个字节的小图标，您需要另一个HTTP请求是很愚蠢的。 So I wondered, how could I make that image part of a sprite (eg background-position=0px -200px; ) in order to speed up and save that valuable HTTP request. 所以我想知道，如何才能使该图像成为精灵的一部分（例如background-position=0px -200px; ），以便加快并保存该有价值的HTTP请求。 How can I get this into an existing sprite image with my logo and other artworks? 如何将其与徽标和其他艺术品一起保存到现有的精灵图像中？
The robot pointing to favicon.ico , item number 31 on the waterfall graph, is my pet ZAM. 指向瀑布图上项目编号31的favicon.ico的机器人是我的宠物ZAM。 He's usually happier and he has a good point letting me know it's time for some creative upgrades on the web, though he and I don't agree on his outfit, which I think is a bit silly today... 他通常会更快乐，他有一个很好的观点，让我知道现在是时候在网络上进行一些创意升级了，尽管他和我不同意他的服装，但我认为今天这有点愚蠢...
#1楼
参考：
#2楼
Not really an answer to the question but simply to compliment the answers given by and I offer an elegant solution to the 404 favicon issue. 并不是真正的问题答案，只是为了补充和给出的答案，我为404图标的问题提供了一种优雅的解决方案。
Because some apps and browsers and whatnot check for a favicon.com and if the icon is not found in the site root you can simply respond to the request with the header. 因为某些应用程序和浏览器会检查favicon.com，并且如果在网站根目录中未找到该图标，则只需使用头请求即可。
Apache Examples: Apache示例：
Apache option one (and my favorite), simple one liner in your .htacces or .conf: 在您的.htacces或.conf中，Apache选项一（也是我最喜欢的），一个简单的衬里：
Redirect 204 /favicon.ico
Apache option two: Apache选项二：
ErrorDocument 204 ""
For further reading, there is nice blog post by Stoyan Stefanov at 为了进一步阅读，Stoyan Stefanov提供了不错的博客文章， 为
#3楼
Does it really matter? 真的有关系吗？
Many browsers load the favicon as a low priority so that it doesn't block the page load in anyway, so yes it's an extra request but it's not on any critical path. 许多浏览器将Favicon的优先级较低，因此无论如何它都不会阻止页面加载，因此，是的，这是一个额外的请求，但它不在任何关键路径上。
The accepted solution is horrible as until the JS has been retrieved and executed all the DOM elements below will be blocked from rendering and it doesn't reduce the number of requests! 被接受的解决方案是可怕的，因为直到检索并执行JS为止，下面的所有DOM元素都将被阻止呈现，并且它不会减少请求的数量！
#4楼
You can use 8-bit PNG instead of ICO format for even smaller data footprint. 您可以使用8位PNG而不是ICO格式来获得更小的数据空间。 Only thing you have to change is using "data:image/png" instead of "data:image/x-icon" MIME type header: 唯一需要更改的是使用“ data：image / png”而不是“ data：image / x-icon” MIME类型标头：
"type" attribute can be "image/png" or "image/x-icon", both works for me. “ type”属性可以是“ image / png”或“ image / x-icon”，两者都对我有用。
You can convert ICO to 8-bit png using gimp or convert: 您可以使用gimp将ICO转换为8位png或进行转换：
convert favicon.ico -depth 8 -strip favicon.png
and encode PNG binary to base64 string using base64 command: 并使用base64命令将PNG二进制编码为base64字符串：
base64 favicon.png
#5楼
Here's the easiest way: 这是最简单的方法：
What icon it represents? 它代表什么图标？ Answer and upvote below! 请在下面回答并投票！
#6楼
Good point and nice idea, but impossible. 好点和好主意，但不可能。 A favicon needs to be a single, separate resource. 一个Favicon必须是一个单独的资源。 There is no way to combine it with another image file. 无法将其与另一个图像文件合并。
转载地址：http://uglgj.baihongyu.com/