每个人都知道如何在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