每个人都知道如何在HTML中设置favicon.ico链接:
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
但是对于一个只有几个字节的小图标，我们需要另一个可能会降低速度的HTTP请求，这是愚蠢的。
所以我想知道，我怎么能让favicon的一部分可用的精灵(例如，background-position=0px -200px;)，可以作为一个logo在网站的其余部分，以加快网站的速度，并节省宝贵的和宝贵的HTTP请求。我们如何将其与我们的标志和其他艺术品一起放入现有的精灵图像中?
当前回答
这并不是对这个问题的真正回答，而只是对Marcel和yahelc给出的答案的赞扬。我为404图标问题提供了一个优雅的解决方案。
一些应用程序和浏览器会检查favicon.ico文件，如果在站点根目录中没有找到图标，您可以简单地用204响应头响应请求。
Apache的例子:
Apache选项一(也是我最喜欢的)，在你的.htacces或.conf中简单的一行代码:
Redirect 204 /favicon.ico
Apache选项二:
<Files "favicon.ico">
ErrorDocument 204 ""
</Files>
Stoyan Stefanov写了一篇不错的博客文章供进一步阅读。
其他回答
很抱歉，您不能将favicon与其他资源合并。
这意味着你基本上有两个选择:
If you're comfortable with your site not having a favicon - you can just have the href point to a non-icon resource that is already being loaded (e.g., a style sheet, script file, or even some resource that benefits from being pre-fetched). (My brief testing indicates that this works across most, if not all, major browsers.) Accept the extra HTTP request and just make sure your favicon file has aggressive HTTP cache-control headers set. (If you have other websites under your control, you might even have them sneakily preload the favicon for this website - along with other static resources.)
附注:行不通的创造性解决方案:
奇怪的CSS数据URI技巧(由评论者Felix Geenen链接)不起作用。 使用JavaScript执行favicon <link>元素的延迟注入(由用户yc建议)可能只会让事情变得更糟——导致两个HTTP请求。
您可以使用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将ICO转换为8位PNG或转换:
convert favicon.ico -depth 8 -strip favicon.png
并使用base64命令将PNG二进制文件编码为base64 -string:
base64 favicon.png
这真的重要吗?
许多浏览器以低优先级加载favicon，这样它就不会阻塞页面加载，所以是的，这是一个额外的请求，但它不在任何关键路径上。
JavaScript解决方案很糟糕，因为JavaScript代码已经被检索和执行，下面所有的DOM元素将被阻止呈现，并且它不会减少请求的数量!
我在这个页面上找到了一个有趣的解决方案。它是用德语写的，但你应该能看懂代码。
您将图标的base64数据放入外部样式表中，因此它将被缓存。在你的网站头部，你必须定义带有id的favicon，并且favicon被设置为该id的样式表中的背景图像。
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需要是一个单独的、独立的资源。没有办法将它与另一个图像文件合并。
