一个很小的图标需要另一个HTTP请求是不是很愚蠢？如何将收藏夹图标放到精灵中？

本文翻译自：Isn't it silly that a tiny favicon requires yet another HTTP request? How can I put the favicon into a sprite?

Everybody knows how to set up a favicon.ico link in HTML: 每个人都知道如何在HTML中设置favicon.ico链接：

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

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楼

参考：https://stackoom.com/question/LojO/一个很小的图标需要另一个HTTP请求是不是很愚蠢-如何将收藏夹图标放到精灵中

#2楼

Not really an answer to the question but simply to compliment the answers given by Marcel and yahelc I offer an elegant solution to the 404 favicon issue. 并不是真正的问题答案，只是为了补充Marcel和yahelc给出的答案，我为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 204 response header. 因为某些应用程序和浏览器会检查favicon.com，并且如果在网站根目录中未找到该图标，则只需使用204响应头响应请求即可。

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选项二：

<Files "favicon.ico">ErrorDocument 204 ""
</Files>

For further reading, there is nice blog post by Stoyan Stefanov at http://www.phpied.com/204-no-content/ 为了进一步阅读，Stoyan Stefanov提供了不错的博客文章，网址为http://www.phpied.com/204-no-content/

#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类型标头：

<linkhref="data:image/png;base64,your-base64-encoded-string-goes-here"rel="icon" type="image/png"
/>

"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: 这是最简单的方法：

<!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>

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请求是不是很愚蠢？如何将收藏夹图标放到精灵中？相关推荐

如何在iPhone，iPad或Mac上的Safari中启用收藏夹图标
Safari 12 is here with a feature we've all been waiting for: favicons. Here's how to enable them on ...
网站icon收藏夹图标
<link rel="icon" href="/jb51.ico" type="image/x-icon"/> <link ...
Ubuntu18.04 同一个程序显示两个图标，收藏夹图标不合并问题解决
一.同一个程序运行时的窗口图标与收藏夹图标不合并的问题: 在网上看到了很多都在复制粘贴别人的内容,都是让添加StartupWMClass,有时候这样并不会生效,另外收藏夹的图标添加有两种情况: 1)从 ...
自定义网站的icon和收藏夹图标
定制网站收藏夹图标的方法有两种: 第一种方法: 第一步,当然是准备一个能体现您的主页的风格和个性的图标.比较简便的办法除了下载,就是将您的网站的logo做成一个图标. 第二步,将这个图标文件命名为:f ...
#网站图标、地址栏图标、收藏夹图标、favicon.ico
本文关键词:网站图标.地址栏图标.收藏夹图标相关链接: 百度百科:favicon.ico 关于shortcut icon和icon代码的区别介绍一.favicon.ico的显示的位置: 1.在地址 ...
删除“ie8左侧收藏夹图标（黄星星）”及“恢复”的方法
将下列代码存入.reg文件: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\ ...
将搜狗浏览器中收藏夹导入到IE中的小工具
测试了,能用.可以将搜狗中的收藏夹,转到IE中,然后可以将IE收藏夹导入到任何一种浏览器中. 工具下载:http://download.csdn.net/source/2634825
网站加入到收藏夹,前面显示的是小图标
第一步,准备一个图标制作软件. 首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以.ico作为扩展名.普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制 ...
因买不到RTX 3090，小哥自己搭建了一个专业级机器学习工作站
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达来自|知乎作者|Emil Wallner 来源 AI科技评论编辑丨极市平台极 ...

一个很小的图标需要另一个HTTP请求是不是很愚蠢？如何将收藏夹图标放到精灵中？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

一个很小的图标需要另一个HTTP请求是不是很愚蠢？如何将收藏夹图标放到精灵中？相关推荐

最新文章

热门文章

一个很小的图标需要另一个HTTP请求是不是很愚蠢？ 如何将收藏夹图标放到精灵中？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

一个很小的图标需要另一个HTTP请求是不是很愚蠢？ 如何将收藏夹图标放到精灵中？相关推荐

最新文章

热门文章

一个很小的图标需要另一个HTTP请求是不是很愚蠢？如何将收藏夹图标放到精灵中？

一个很小的图标需要另一个HTTP请求是不是很愚蠢？如何将收藏夹图标放到精灵中？相关推荐