每个人都知道如何在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
其他回答
您可以使用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需要是一个单独的、独立的资源。没有办法将它与另一个图像文件合并。
我认为在大多数情况下，它不会导致另一个HTTP请求，因为这些请求通常在第一次访问后被转储到浏览器的缓存中。
这实际上比任何提出的“解决方案”都更有效。
您可以尝试使用数据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提供静态文件等方式所节省的开销相比，这样做所节省的开销微不足道。
