是不是很傻，一个小的图标需要另一个HTTP请求？如何使favicon成一个精灵？

问题描述：

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

Everybody knows how to setup a favicon.ico link in HTML:

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

但我认为这只是一个小小的几字节图标你需要另一个HTTP请求。所以我想知道，为了加快和保存这个有价值的HTTP请求，我该如何使这个图像的一部分精灵（例如background-position = 0px -200px;）：我该如何解决这个问题，并让它进入我的其余

But I think it is just silly that for a tiny several-byte icon you need yet another HTTP request. So I wondered, how could I make that image part of a sprite (e.g. background-position=0px -200px;) in order to speed up and save that valuable HTTP request: how could I tackle this and get it into the rest of my existing image sprite with my logo and my other artworks?

机器人指向 favicon.ico 项目nr.31在瀑布图上，是我的宠物ZAM，他经常更快乐，他有一个好点让我知道它的时间在网上的一些创意升级，虽然他和我不同意他的衣服，我认为今天有点傻了...

The robot pointing to favicon.ico, item nr.31 on the waterfall graph, is my pet ZAM, he's often happier and he has a good point letting me know its 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...

答

@ yc的回答正在注入base64的问题/ 5199902 / isnt-it-silly-that-a-tiny-favicon-requires-yet-another-http-request-how-to-make /来自通常将被使用和缓存的JavaScript文件的编码的图标，并且还通过在相关的（例如）通过向其馈送数据URI来抑制请求 favicon.ico 的标准浏览器行为 meta 标签。

A minor improvement to @yc's answer is injecting the base64-encoded favicon from a JavaScript file that would normally be used and cached anyway, and also suppressing the standard browser behavior of requesting favicon.ico by feeding it a data URI in the relevant meta tag.

此技术避免了额外的http请求，并确认在最新版本的Chrome，Firefox和Opera在Windows 7上。

This technique avoids the extra http request and is confirmed to work in recent versions of Chrome, Firefox and Opera on Windows 7. However it doesn't appear to work in Internet Explorer 9 at least.

index.html / strong>

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. */

是不是很傻，一个小的图标需要另一个HTTP请求？如何使favicon成一个精灵？

相关推荐