每个人都知道如何在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请求。我们如何将其与我们的标志和其他艺术品一起放入现有的精灵图像中?
当前回答
您可以使用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
其他回答
这是最简单的方法:
<!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>
它代表什么图标?回答下面!
您可以尝试使用数据URI。没有HTTP请求!
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">
除非你的页面有静态缓存，否则你的favicon将无法被缓存，根据favicon图像的大小，你的源代码可能会因此变得有点臃肿。
数据URI favicons似乎在大多数现代浏览器中都可以工作;在我的Mac电脑上，它可以在最新版本的Chrome、Firefox和Safari浏览器上运行。但似乎不能在ie浏览器上运行，可能也不能在某些版本的Opera上运行。
如果您担心旧的Internet Explorer版本(现在可能不需要担心)，您可以包含一个Internet Explorer条件注释，以传统的方式加载实际的favicon.ico，因为旧的Internet Explorer似乎不支持数据URI favicon。
`<!--[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，不管我们设计了什么技巧。与gzipping、为静态内容使用远未来过期头文件、缩小JavaScript文件、将背景图像放入精灵或数据uri、通过CDN提供静态文件等方式所节省的开销相比，这样做所节省的开销微不足道。
我在这个页面上找到了一个有趣的解决方案。它是用德语写的，但你应该能看懂代码。
您将图标的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>
对@yc的回答的一个小改进是从通常使用和缓存的JavaScript文件中注入base64编码的favicon，并通过在相关元标记中提供数据URI来抑制请求favicon.ico的标准浏览器行为。
这项技术避免了额外的http请求，并且被证实适用于Windows 7上最新版本的Chrome、Firefox和Opera。然而，至少在ie9中它似乎不能工作。
文件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 / / favicon.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将ICO转换为8位PNG或转换:
convert favicon.ico -depth 8 -strip favicon.png
并使用base64命令将PNG二进制文件编码为base64 -string:
base64 favicon.png
