每个人都知道如何设置 HTML 中的 favicon.ico 链接︰

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

但我认为它是只傻小几个字节图标需要另一个 HTTP 请求所以我想知道,如何可以提出 sprite 图像部分 (例如背景位置 = 0px-200px;) 以加速建立并保存有价值 HTTP 请求︰ 如何我可以开拓这并将它与我的徽标和其他我 artworks 我现有的图像画面的其余部分?

自动机指向favicon.ico,瀑布图上, 项 nr.31 是我的宠物 ZAM,他很开心,他有一个很好的点,让我知道网上的一些创新升级的时候尽管他,我不同意他的外套,我认为今天是很好...

enter image description here

2011-03-04 22:17:52
问题评论:

很愚蠢,不存在而合并为一个单一的优化流.css/.js/.png/.html,不是吗?可能有人会不断提出这一想法现在考虑

相关的 @Richard︰多部分响应和 Google 已经解决了这一新的、 优化的 web 协议的一项计划,我忘记了它的名称。.编辑︰ 它具有名为SPDY但这显然是在将来,到目前为止。

@Richard 也称为 cyberkiwi,您可以看清所有 html 文件与data:值的图像,和脚本内联。

顺便说一下,很好的草绘手册:)

草绘的 + 1:)

回答:

提高了次要, @yc 的回答注入 base64 编码 favicon 从 JavaScript 文件,通常会使用并缓存,以及还禁止通过喂养它相关的meta标记中的数据 URI 请求favicon.ico的标准的浏览器行为。

该技术避免了额外的 http 请求,确认在最近的版本 Chrome,Firefox,Opera 在 Windows 7 上的工作。但是它似乎至少在 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中的字符是图标的几乎我相同大小!!如何想的?

@Sam︰ 我注意到的堆栈溢出favicon.ico文件的PNG 等效的 base64 的一半大小。好和简洁。

eeehm 我不敢确定的是我能理解您的意思: 文件的大小的一半...?像 icon.png 一样的 PNG 文件?或指 base64 相当于它较小,当其 png 格式的图标格式或 gif 图像的打印?一些好奇的人。Cheers 配对 !

@Sam︰ 我比较对此ICO 文件base64此 PNG的 base64。在我上面的示例代码中使用 PNG 的版本,是大小的一半。

ooh 看,使您基本 64 答案,并普遍使用 base64 PNG 格式的首选选项然后右?

我认为在大多数情况下它不会导致另一个 HTTP 请求为这些通常在浏览器的缓存中转储后第一次访问。

这是比任何建议的"解决方案"的效率会更高。

这是只有明智的答案。这是不成问题的问题,不需要修复。

杰姆斯,我的解决方案实际上是只有一种可能,但我永远不会实际建议给人的一个。但是,似乎大多数浏览器将会在新的浏览器会话开始发出 favicon 的新 HTTP 请求。而且,它始终不会返回 304。

浏览器仍将进行头呼叫,即使这样仍会有一个 HTTP 请求的开销是在浏览器缓存中。

实际上一切都取决于浏览器。其中大部分将总是寻找的某些位置在 favicon 即使页不提及它和拨打头部每次刷新。

Favicon 需要多长时间过期标头就像任何好的静态资源。这一点,甚至头调用被禁止。

您可以尝试数据 URI。HTTP 请求 !

<link id=​"favicon" rel=​"shortcut icon" type=​"image/​png" href=​"data:​image/​png;​base64,....==">

当然,这是愚蠢的因为除非您的站点有静态缓存,您 favicon 不能被缓存,并根据 favicon 图像的复杂程度,您的源代码可能会有点臃肿。

下面是一个示例似乎适用于当今的大多数浏览器;我可以使用最新版本的 Chrome,Firefox 和 Safari 在 mac。似乎在 Internet Explorer 中和可能是 Opera 的某些版本中工作。

如果我要实现的 favicon 数据 URI,我就这样做︰

  1. 包括将以传统的方式加载实际 favicon.ico IE 条件注释,因为它看起来的 Internet Explorer 不支持数据 URI 收藏图标

    <!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /><![endif]-->

  2. 盖将征求它无论如何,因为这些浏览器的浏览器向您根目录中包含的 favicon.ico 文件,如果他们已经检查无论做什么,也不可能浪费 404 响应的 HTTP 请求。

  3. 使用功能检测,对检测数据 URI 的支持,并注入动态的非 IE 的浏览器中不支持数据 Uri favicon:

    <!--[if !(IE)]><!--><script>(function(){ var d = new Image(); d.onload = data.onerror = function(){ if(this.width != 1 || this.height != 1) //inject favicon here }; d.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; })();</script> <!--<![endif]-->

另一种可能性是常规的 favicon 代码,然后只插入 favicon在 DOM 准备就绪 (使用 jQuery 的示例),您可以删除︰

   jQuery(function($){
    $('<link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" />').appendTo('head');
   });

这样,在不能请求自动他们自己的浏览器中进行favicon请求之前将加载整个页面。

如果您并不关心真正有 favicon,您无法 (如注释指出) 只需为您 favicon,包括 blank.gif 像素并利用此机会预先加载它,以便将从缓存中提供后续的使用情况。还可以使用另一个流行的网站很有可能具有其缓存,如http://google.com/favicon.ico,favicon,它从缓存提供的 favicon。

随着者所指出的只是因为您可以执行此操作并不意味着应该因为一些浏览器将请求而不考虑我们设计技巧的 favicon.ico。通过这样做,这就是少与您会做这样的事情 gzipping,从使用远未来储蓄相比可节省的消耗的资源量过期贴图层将背景图像放入子画面或数据服务 CDN 等静态文件的 Uri 的 JavaScript 文件的静态内容的标题。

但不起作用在 IE8 中

@Sam 很抱歉,我也了解什么 @yc 现在,意味着我的错误。当然可以通过 JavaScript,应该是可能的完全访问浏览器中的<link rel>元素。我甚至见过游戏编程...,这种方式,但是它似乎不在 IE 中,工作和它可能不会阻止默认/favicon.ico查找请求

@Pekka,我看到。PS 是 increcible 游戏 !将我整个屏幕 realestate 放入耻辱,因为所有需要该 16 x 16 像素 haha。此超链接打开该 favicon,实际上可能是什么的一些可能性。

缺失的 favicon 声明,在所有浏览器都将自动查找它的盲人企图在请求默认 URL /favicon.ico因此如果您遗漏了 favicon <link> (可以在以后通过 Javascript 添加它) 你可能只使事情更糟。

只需使用 favicon.ico:) 存储 transparant gif

好的方面并不错,但不可能。Favicon 必须是一个单一、 独立资源。有是没有办法将它与另一个图像文件结合起来。

也许我是盲人,但画面中是唯一的地方我能看到 Google 搜索 favicon: google.com/search?q=foo

@yc google.com/favicon.ico是,浏览器将自动查找它的地方

Google 的 favicon 是google.com/favicon.ico,不仅仅是看源

@yc 则不是盲人,证明自己的一个非常有创意的答案是否值得向上那里...正如已经指出 Pekka /favicon.ico是,浏览器将自动查找。现在,到真正的坏消息︰ 如果 favicon 为非存在,这意味着错误 404 惩罚,这会导致微小的延迟太!!那里可能这 favicon 格斗任何转义。它们是那么微小但哦那么 mighty...dammit:)

值得注意的是,这应该实际上,是一次申请,几乎永远。其他的一切,长缓存计时器和适当 301 返回服务器将请求没有任何意义点,(除非它并不存在-呀 !) favicon。

您可以像使用 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" /> 

提示︰ 在本答案用 base64 编码字符串是一个 PNG 文件和 IE10 或旧将不起作用。

请输入您的翻译

Isn't it silly that a tiny favicon requires yet another HTTP request? How to make favicon go into a sprite?

确认取消