一个小小的favicon需要另一个HTTP请求,这不是很愚蠢吗？如何让favicon进入雪碧？
Sam*_*Sam 294 html javascript css favicon performance
大家都知道如何在HTML中设置favicon.ico链接:
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
但我认为,对于一个小的几字节图标,您需要另一个HTTP请求,这简直太傻了.所以我想知道,我怎么能让这个图像成为精灵的一部分(例如background-position = 0px -200px;),以便加速并保存那个有价值的HTTP请求:我怎么能解决这个问题并把它带到我的其余部分我的徽标和其他艺术品的现有图像精灵？
指向background-position=0px -200px;瀑布图上项目nr.31 的机器人是我的宠物ZAM,他经常更开心,他有一个好点让我知道它在网上进行一些创意升级的时间,尽管他和我不同意他的装备,我觉得今天有点傻......
Jam*_*son 144
我认为在大多数情况下它不会导致另一个HTTP请求,因为这些请求通常在第一次访问后被转储到浏览器的缓存中.
这实际上比任何提出的"解决方案"更有效.
- 这是唯一明智的答案.这是一个不需要修复的非问题. (51认同)
- favicon需要一个长期过期的标题,就像任何好的静态资源一样.这样,即使HEAD调用也被抑制. (14认同)
- 实际上一切都取决于浏览器.即使页面没有提及它并且每次刷新都要进行HEAD调用,他们中的大多数都会在某些位置_always_寻找一个favicon. (3认同)
- 浏览器仍会进行HEAD调用,即使它位于浏览器缓存中,因此您仍然会有HTTP请求的开销. (2认同)
Mar*_*cel 132
对@ yc的回答的一个小改进是从一个通常会被使用和缓存的JavaScript文件中注入base64编码的favicon,并且还favicon.ico通过在相关meta标记中提供数据URI来抑制请求的标准浏览器行为.
该技术避免了额外的http请求,并确认在Windows 7最新版本的Chrome,Firefox和Opera的工作然而,它并没有出现在Internet Explorer 9中至少工作.
的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 JS would normally be in here too. */
演示:turi.co/up/favicon.html
- +1美丽的缓存突破@Marcel.PS我的.ico文件的`HTTP Headers Response`中的字符几乎与我的图标大小相同!! 你觉得如何？ (3认同)
- @Sam:我注意到了Stack Overflow [favicon.ico]的[PNG等价物](http://i.imgur.com/cIXXa.png)的base64(http://stackoverflow.com/favicon.ico)文件大小只有一半.漂亮而紧凑. (2认同)
- 这是一个可怕的解决方案...JS 会阻止其下方 DOM 元素的渲染，而 favicon 可以推迟到稍后 (2认同)
Yah*_*hel 97
您可以尝试数据URI.没有HTTP请求!
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">
除非您的页面具有静态缓存,否则您的favicon将无法缓存,并且根据您的favicon图像的大小,您的源代码可能会因此而变得臃肿.
数据URI favicons似乎适用于大多数现代浏览器; 我在Mac上使用最新版本的Chrome,Firefox和Safari.似乎不适用于Internet Explorer,可能还有某些版本的Opera.
如果您担心旧IE(并且您可能不应该这些日子),您可以包含IE条件注释,以传统方式加载实际的favicon.ico,因为看起来旧的Internet Explorer不会支持数据URI Favicons
`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /><![endif]--> `
- 在你的根目录中包含favicon.ico文件,以涵盖将以任何方式请求它的浏览器,因为对于那些浏览器,如果他们已经在检查你做什么,你也可以不浪费带有404响应的HTTP请求.
您也可以使用另一个受欢迎的网站的favicon,它可能会缓存它们的favicon http://google.com/favicon.ico,以便从缓存中提供.
正如评论者指出的那样,仅仅因为你能做到这一点并不意味着你应该这样做,因为有些浏览器会请求favicon.ico而不管我们设计的技巧.通过执行此操作可节省的开销与使用gzipping,使用远期未来的静态内容过期标头,缩小JavaScript文件,将背景图像放入精灵或数据URI等所节省的成本相比将是微不足道的. ,从CDN等服务静态文件
- @Sam我很抱歉,我明白了@yc的意思,我的错误.当然,您可以通过JavaScript完美地访问浏览器中的`<link rel>`元素,这应该是可能的.我甚至看过[游戏](http://www.p01.org/releases/DEFENDER_of_the_favicon/)以这种方式编程......但它似乎也不能在IE中工作,它可能不会阻止默认`/ favicon.ico`查询请求 (4认同)
- 如果缺少favicon声明,*所有*浏览器将自动请求默认URL"/ favicon.ico",盲目地尝试定位它.因此,如果你省略了favicon"<link>"(稍后通过Javascript添加它),你可能只会让事情变得更糟. (3认同)
- @Pekka,我明白了.PS这是一个可以增加的游戏!让我整个屏幕的房地产变得羞耻,因为你所需要的只是16x16像素哈哈.这个超链接打开了一些可能性,以便使用该图标实际可行. (2认同)
- 只需使用favicon.ico存储您的transparant gif :) (2认同)
Rou*_*ica 51
2020年杀手级解决方案
这个解决方案必然是在最初提出这个问题九年后提出的，因为直到最近，大多数浏览器还不能处理.svg格式的图标。
现在已经不是这样了。
请参阅：https : //caniuse.com/#feat=link-icon-svg
1) 选择 SVG 作为 Favicon 格式
现在，在 2020 年 6 月，这些浏览器可以处理SVG Favicon：
- 铬合金
- 火狐
- 边缘
- 歌剧
- 安卓版 Chrome
- KaiOS浏览器
请注意，这些浏览器仍然不能：
- 苹果浏览器
- iOS Safari
- 火狐安卓版
尽管如此，考虑到上述情况，我们现在可以以合理的信心使用SVG Favicon。
2) 将 SVG 显示为数据 URL
这里的主要目标是避免 HTTP 请求。
正如本页上的其他解决方案所提到的，一个非常聪明的方法是使用Data URL而不是HTTP URL。
SVG（尤其是小型 SVG）非常适合 Data URL，因为后者只是纯文本（带有任何潜在的歧义字符百分比编码），而前者是 XML，可以写成一长行纯文本（带有少量百分比代码）非常简单。
3)整个SVG 是一个 Emoji
注意这一步是可选的。您的 SVG可以是单个表情符号，但也可以很容易地成为更复杂的 SVG。
2019 年 12 月，Leandro Linares是第一个意识到自从 Chrome 加入 Firefox 支持 SVG Favicon 以来，值得尝试看看是否可以从表情符号中创建一个 favicon：
https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/
利纳雷斯的预感是对的。
几个月后（2020 年 3 月），Code Pirate Lea Verou意识到了同样的事情：
https://twitter.com/leaverou/status/1241619866475474946
收藏夹图标再也不会一样了。
4）自己实施解决方案：
这是一个简单的 SVG：
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16">
<text x="0" y="14"></text>
</svg>
这是与数据 URL相同的 SVG ：
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E%3C/text%3E%3C/svg%3E
最后，这是作为 Favicon 的数据 URL：
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
5）更多技巧（......这些不是你父母的收藏夹！）
由于 Favicon 是 SVG，因此可以对其应用任意数量的滤镜效果（SVG 和 CSS）。
例如，除了上面的白色独角兽图标，我们可以通过应用过滤器轻松制作黑色独角兽图标：
style="filter: invert(100%);"
黑色独角兽图标：
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
- 谢谢鲁宁！杰出的！SVG 的大小也可以调整，因此在接下来的 9 年内，我们将可以选择希望网页浏览器选项卡上的图标有多大。选择：`16x16` `32x32` `64x64` `128x128` 作为原始海报，看到 9 年后人们仍然关心那些让生活更美丽、更愉快、更快捷或更优雅的小事，真是令人振奋！:) (2认同)
- 你的问题完全有先见之明，@Sam。当您在 2011 年提出这个问题时，Steve Souders _长期_ 已经确定应尽可能消除与服务器的往返。但多年后，该网站图标却挑衅地要求有自己的专用往返服务。值得庆幸的是，由于浏览器制造商对基于 SVG 的图标的集体支持（虽然迟来但很受欢迎），情况已不再如此。（我只是在努力中遇到这个问题 - 仍在进行中，但我很快就会返回 - 创建一个 [_single-file_ Progressive Web App](https://github.com/RouninMedia/ ASP）。 (2认同)
- ``<IMG src="data:image/svg...">`` 已经工作了很多年，我在 [52 PlayingCards Custom Element](https://cardmeister.github.io) 中使用它，我猜他们使用favicon 的解析代码相同。无需转义 DataURI 的所有内容，只需转义 **##** 并仅使用单引号。``xlink`` [已弃用](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href)，不是必需的。将数据 URI 简化为：``data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text x=' 0' y='14'></text></svg>`` （在 Chrome 中测试） (2认同)
- 在将 viewBox 调整为“20x20”并将 x,y 位置调整为“-1,15.5”之后，我想说这是使用表情符号字符时开始的游乐场：“href=”data:image/svg +xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><矩形宽度='100%'高度='100%'填充='hotpink' /><text x='-1' y='15.5' stroke='red'></text></svg>"``（在 Chrome 和 FireFox 上测试）Firefox 尊重 Emoji 图标颜色设计，Chrome 不尊重。 (2认同)
Don*_*Cai 20
你可以使用base64编码的favicon,如:
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
- 如果有人想知道这是Linux企鹅。 (2认同)
Pek*_*ica 14
好点和好主意,但不可能.favicon需要是一个单独的资源.无法将其与另一个图像文件组合.
- 应该指出的是,实际上,这应该是一次性请求,几乎是永远的.与其他所有内容一样,服务器返回的长缓存定时器和正确的301将使favicon请求成为一个没有实际意义的点(除非它不存在 - 呀!). (8认同)
- @yc http://www.google.com/favicon.ico是浏览器自动查找的地方 (4认同)
- @yc你不是盲人,你证明自己值得在那里有一个非常有创意的答案......正如Pekka指出的那样`/ favicon.ico`是浏览器自动查看的地方.现在出现了真正的坏消息:如果favicon不存在,则意味着错误404惩罚,这将导致轻微的延迟!! 似乎没有逃离这个favicon地牢.他们是如此之小但是如此强大......该死的:) (3认同)
Fel*_*nen 13
我发现一个有趣的解决方案这个页面.它是德语,但您将能够理解代码.
您将图标的base64数据放入外部样式表,因此它将被缓存.在您的网站的头部,您必须使用id定义favicon,并将favicon设置background-image为该ID的样式表中的a .
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>
- 我刚刚确认这个解决方案**确实有用** - 至少在W7 64位的Chrome 10.0.648和W7 64位的FF 4.0中 (13认同)
- 一位声名为74.947的人在本页的某个地方说:*"你不能!"*......然后另一个声誉低于50的人说:*"你可以!"*这是否意味着推动解决方案和具体的创新驱动器与声誉没有联系或关系？......好吧那就太棒了! (8认同)
- 大声笑,我已经证实上述两个陈述似乎是矛盾的,尽管版本号略有不同,我怀疑Chrome的行为改变了那么多.Firefox可能从3.6到4,但不太可能在一次小更新中改变了Chrome 10. (4认同)
- 我刚刚确认这个解决方案**不起作用** - 至少在Windows上没有Chrome 10和Firefox 3.6 (3认同)
真的有关系吗？
许多浏览器将favicon作为低优先级加载,因此它无论如何都不会阻止页面加载,所以是的,它是一个额外的请求,但它不在任何关键路径上.
接受的解决方案是可怕的,因为直到JS被检索并执行以下所有DOM元素都将被阻止渲染,并且它不会减少请求的数量!
正确的解决方案是使用HTTP流水线.
HTTP流水线技术是一种将多个HTTP请求写入单个套接字而不等待相应响应的技术.仅在HTTP/1.1中支持流水线操作,而不是在1.0中.
它需要服务器支持它,但不一定是partipate.
HTTP流水线操作需要客户端和服务器都支持它.需要符合HTTP/1.1标准的服务器来支持流水线操作.这并不意味着服务器需要管道响应,但如果客户端选择管道请求,则要求它们不会失败.
许多浏览器客户端都不应该这样做.
大多数浏览器都禁用HTTP流水线操作.
- Opera默认启用流水线操作.它使用启发式方法来控制所使用的流水线级别,具体取决于连接的服务器.
- 由于担心有关错误的代理和行头阻塞,Internet Explorer 8不会对请求进行管道传输.
- Mozilla浏览器(如Mozilla Firefox,SeaMonkey和Camino)支持流水线操作,但默认情况下禁用.它使用了一些启发式方法,尤其是为IIS服务器关闭流水线操作.
- Konqueror 2.0支持流水线操作,但默认情况下禁用.[需要引证]
- Google Chrome不支持管道传输.
我建议您尝试在Firefox中启用流水线操作并在那里尝试,或者只使用Opera(不寒而栗).
- 在传输层中管理优化.它仍然涉及到favicon的单独的HTTP往返,这是问题所要求的. (7认同)
- @MárÖrlygsson和他的支持者:它不是在传输层完成的.在实际模型中,这都是在应用层中完成的.理论上,流水线应该在会话层. (3认同)
- 我不会和你争论这些语义.事实仍然认为Sam不能"使用流水线"(尽管它很整洁)使他的网站加载速度更快,因为piplining支持是A)你自己指出的不稳定,以及B)每个人选择加入个人用户. (3认同)
这不是问题的答案,而只是为了赞美Marcel和yahelc给出的答案,我为404 favicon问题提供了一个优雅的解决方案.
因为某些应用程序和浏览器以及诸如此类检查favicon.com以及如果在站点根目录中找不到图标,您只需使用204响应标头响应请求即可.
Apache示例:
Apache选项一(和我最喜欢的),你的.htacces或.conf中的简单一行:
Redirect 204 /favicon.ico
Apache选项二:
<Files "favicon.ico">
ErrorDocument 204 ""
</Files>
如需进一步阅读,Stoyan Stefanov撰写了一篇精彩的博客文章,网址为http://www.phpied.com/204-no-content/
这是一个好主意,但如果谷歌没有在他们的主页上做到这一点,我打赌它不能(目前)完成
- 谷歌是伟大的,但这样的想法似乎适得其反,令人窒息.总有新的,更好的,非常可能的做事方式,你不必为行业领导者提供帮助. (13认同)
- 显然,Google从SO中获取他们的想法,而不是相反;) (8认同)
- 很好的答案,如果谷歌可以让他们的网页更快,他们会. (3认同)
对不起,您无法将favicon与其他资源合并.
这意味着您基本上有两个选择:
如果您对没有图标的网站感到满意 - 您可以
href指向已经加载的非图标资源(例如样式表,脚本文件,甚至是预取的一些资源) .)
(我的简短测试表明,这适用于大多数(如果不是全部)主流浏览器.)接受额外的HTTP请求,并确保您的favicon文件设置了积极的HTTP缓存控制标头.
(如果您有其他网站在您的控制之下,您甚至可以让他们偷偷地预加载本网站的图标 - 以及其他静态资源.)
PS Creative解决方案不起作用:
- 奇怪的CSS数据 - uri技巧(由评论者Felix Geenen链接)不起作用.
- 使用Javascript执行favicon
<link>元素的延迟注入(由用户@yc建议)可能会使事情变得更糟 - 通过导致两个 HTTP请求.
- LOL +1 for*`"创新解决方案无效:"* (2认同)