306

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

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

但是我认为，对于一个只有几个字节的小图标，您需要另一个HTTP请求是很愚蠢的。所以我想知道，如何才能使该图像成为精灵的一部分（例如background-position=0px -200px;），以加快并保存该有价值的HTTP请求。如何将其与徽标和其他艺术品一起保存到现有的精灵图像中？

指向favicon.ico瀑布图上项目编号31 的机器人是我的宠物ZAM。他通常会更快乐，他有一个很好的观点，让我知道是时候在网络上进行一些创意升级了，尽管他和我不同意他的服装，但我认为今天这有点愚蠢...

在此处输入图片说明

— 山姆
source

47

还没有一种方法可以将.css / .js / .png / .html组合成一个单独的优化流，这不是很愚蠢吗？您可能以为现在有人会想到这个主意

— RichardTheKiwi 2011年

9

与@Richard相关：多部分响应和Google主动提出了一种解决该问题的新的，优化的Web协议，我忘记了它的名称... 编辑：它的名称为SPDY。但这显然是未来的事情。

— Pekka

9

@Richard aka cyberkiwi，您可以将所有内容都放在具有data:图像值和内联脚本的html文件中。

— zzzzBov 2011年

39

顺便说一句，素描人很好:)

— Fatih Acet

18

草图+1 ：）

— Giuliano

140

@yc答案的一个小改进是从通常会使用和缓存的JavaScript文件中注入base64编码的图标，并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

— 马塞尔
source

3

+1美丽的缓存突破@Marcel。PS HTTP Headers Response.ico文件中的字符几乎与我的图标大小相同！！你觉得如何？

— 山姆

2

@Sam：我注意到与堆栈溢出favicon.ico文件等效的PNG的base64 大小只有一半。美观小巧。

— Marcel

1

嗯，我不确定我是否理解您的意思：'文件的大小是...的一半？PNG文件，例如icon.png？还是当它的png格式代替图标格式或gif格式时，等于它的base64较小？好奇。队友的欢呼声！

— 山姆

1

@Sam：我正在比较此PNG的base64和此ICO文件的base64 。上面的示例代码中使用的PNG版本只有一半大小。

— Marcel

1

哦，我知道，这使您的base 64成为了答案，而base64 PNG格式的一般使用是您的首选，然后对吗？

— 山姆

147

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

实际上，这比任何建议的“解决方案”都有效。

— 詹姆斯·安德森
source

52

这是唯一明智的答案。这是一个非问题，不需要修复。

— JoDG 2011年

1

詹姆斯，我的解决方案实际上只是一种可能性，但是我从来不会真正推荐给某人。但是，似乎大多数浏览器都会在新的浏览器会话开始时针对该图标发出新的HTTP请求。而且，它并不总是返回304

— Yahel

4

即使位于浏览器缓存中，浏览器仍会进行HEAD调用，因此您仍然会有HTTP请求的开销。

— Dietbuddha 2011年

3

实际上，一切都取决于浏览器。他们中的大多数人总是会在某些位置寻找收藏夹图标，即使页面没有提及收藏夹，并在每次刷新时进行HEAD调用。

— 大卫·科斯塔

14

网站图标需要一个过期的标头，就像任何好的静态资源一样。这样，即使HEAD调用也被抑制。

— Paul Alexander

102

您可以尝试数据URI。没有HTTP请求！

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

除非您的页面具有静态缓存，否则您的收藏夹图标将无法被缓存，并且根据收藏夹图标图像的大小，您的源代码可能因此变得肿。

数据URI图标似乎可以在大多数现代浏览器中使用；我可以在Mac上的最新版本的Chrome，Firefox和Safari中使用它。在Internet Explorer和某些版本的Opera中似乎无法使用。

如果您担心旧版IE（现在不应该这样），则可以添加IE条件注释，该注释将以传统方式加载实际的favicon.ico，因为似乎旧版Internet Explorer不会支持数据URI图标

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

在根目录中包含favicon.ico文件，以覆盖将以两种方式请求它的浏览器，因为对于这些浏览器，如果无论您执行什么操作都在进行检查，则最好不要将HTTP请求浪费在404响应上。

您也可以只使用另一个受欢迎的网站的图标，例如http://google.com/favicon.ico，该图标可能已经被缓存了，因此可以从缓存中获取该图标。

正如评论者所指出的那样，仅仅因为您可以执行此操作并不意味着您应该这样做，因为某些浏览器将要求favicon.ico，而无论我们设计的技巧如何。与通过gzip压缩，使用远距离到期的静态内容标头，最小化JavaScript文件，将背景图像放入sprite或数据URIs这样的gzipping操作所节省的开销相比，您这样做所节省的开销将是微不足道的。，从CDN提供静态文件等。

— Yahel
source

1

@Pekka是的，这不是一个实际的解决方案，因为未缓存页面上的数据URI额外的字节重量可能会超过该HTTP请求的重量。也许OP可以将图标图标异步注入到DOM中。

— Yahel 2011年

4

@Sam对不起，我明白@yc的意思了，我的错。当然，您可以<link rel>通过JavaScript 完美访问浏览器中的元素，这是可能的。我什至看过以这种方式编写的游戏 ……但是，它似乎也无法在IE中运行，并且它可能也不会阻止默认的/favicon.ico查找请求

— Pekka

2

@Pekka，我明白了。PS那是一个难以置信的游戏！因为您需要的只是16x16像素哈哈，这让我整个屏幕都变得可耻。该超链接打开了有关该收藏夹图标实际可能功能的一些可能性。

— 山姆

3

如果缺少favicon声明，则所有浏览器都会自动请求默认URL /favicon.ico，以进行盲目查找。因此，如果您删除了收藏夹图标<link>（稍后通过Javascript添加它），可能会使情况变得更糟。

— 三月Örlygsson

2

只需使用favicon.ico存储您的透明gif :)

— markijbema 2011年

21

您可以使用base64编码的图标，例如：

<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" />

— 蔡东升
source

1

提示：此答案中使用的base64编码的字符串是PNG文件，不适用于IE10或更旧的版本。

— sibbl '16

2

如果有人想知道这是Linux企鹅。

— Martlark '19

16

我在此页面上找到了一个有趣的解决方案。它是德语，但是您将能够理解该代码。

您将图标的base64数据放入外部样式表中，因此将对其进行缓存。在您网站的顶部，您必须定义一个带有ID的图标，该图标background-image在样式表中被设置为该ID。

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>

— 费利克斯·格宁（Felix Geenen）
source

8

一位拥有74.947声誉的人在本页上说：“您不能！” ……然后另一个人的声誉低于50。他说：“可以！” 这是否意味着寻求解决方案的动力和具体的创新动力与获得声誉没有联系或联系？……那真是太棒了！

— 山姆

4

我刚刚确认了这个解决方案行不通 -至少不会在Chrome 10和Firefox 3.6在Windows上

— 三月Örlygsson

13

我刚刚确认该解决方案确实有效 -至少在W7 64位上的Chrome 10.0.648和W7 64位上的FF 4.0中– 2011

— 山姆

4

大声笑，尽管版本号稍有不同，但我已经确认上述两个陈述是矛盾的，我怀疑Chrome的行为是否发生了太大变化。Firefox可能从3.6升级到了4，但Chrome 10不太可能在较小的更新上进行了很大的更改。

— dyasta 2011年

我可以证实，这确实工作在Chrome 83和在Ubuntu 20.04的Firefox ESR 68，我可以确认它不工作，以防止/favicon.ico命中。这样您就可以获取图像，但不会阻止额外的SSL连接。既然是目标，那就是失败。

— 威尔·

14

好点和好主意，但不可能。一个Favicon必须是一个单独的资源。无法将其与另一个图像文件合并。

— 佩卡
source

1

也许我是盲人，但是我唯一看到Google Search网站图标的地方是sprite：google.com/search?

— q=foo

4

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

— Pekka

3

@yc您不是盲人，您证明自己值得在那里提供一个非常有创意的答案...正如Pekka指出的那样/favicon.ico，浏览器将在其中自动查找外观。现在真正的坏消息是：如果favicon不存在，则意味着错误404惩罚也将导致轻微的延迟！这个Favicon地牢似乎无处可逃。它们是如此之小，但如此强大……可恶...）

— 山姆

请参阅我的答案stackoverflow.com/questions/5199902/…以了解正确的方法来加快正确的方法。

— 马特·乔纳

8

应当指出，实际上，这应该是一次性的请求，几乎是永远的。与其他所有内容一样，较长的缓存计时器和服务器返回的适当的301将使favicon请求成为讨论点（除非它不存在-！）。

— 凯文·佩诺

9

真的有关系吗？

许多浏览器将Favicon的优先级较低，因此无论如何它都不会阻止页面加载，因此，是的，这是一个额外的请求，但它不在任何关键路径上。

被接受的解决方案是可怕的，因为直到检索并执行JS为止，下面的所有DOM元素都将被阻止呈现，并且它不会减少请求的数量！

— 安迪·戴维斯（Andy Davies）
source

8

正确的解决方案是使用HTTP流水线。

HTTP管道传输是一种将多个HTTP请求写到单个套接字而无需等待相应响应的技术。仅HTTP / 1.1支持流水线，而1.0不支持。

要求服务器支持它，但不一定要参与。

HTTP流水线需要客户端和服务器都支持它。需要HTTP / 1.1兼容服务器来支持流水线。这并不意味着需要服务器来流水线响应，而是要求它们在客户端选择流水线请求时不失败。

许多浏览器客户端不应该这样做，而应该这样做。

大多数浏览器都禁用HTTP流水线。

Opera默认情况下启用了流水线操作。它使用启发式方法来控制所使用的流水线级别，具体取决于所连接的服务器。

由于担心代理错误和行头阻塞，Internet Explorer 8不会管道请求。

Mozilla浏览器（例如Mozilla Firefox，SeaMonkey和Camino）支持管道传输，但是默认情况下它是禁用的。它使用一些启发式方法，尤其是关闭IIS服务器的流水线。

Konqueror 2.0支持管道传输，但默认情况下处于禁用状态。[需要引用]

Google Chrome浏览器不支持管道传输。

我建议您尝试在Firefox中启用流水线操作，然后在其中进行尝试，或者只使用Opera（静音）。

— 马特·乔纳
source

7

对在传输层完成的优化进行流水线处理。它仍然需要为favicon进行单独的HTTP往返，这就是问题所在。

— 三月Örlygsson

@MárÖrlygsson不正确。往返意味着客户端必须发出请求，然后等待请求被处理和答案被下载。流水线化意味着该请求将在仍在等待上一个请求完成的同时已经发送，因此，在执行相同步骤时，它将导致的延迟将有所不同……

— Peter

1

Sam无法在所有访问者的浏览器中打开流水线功能，因此从这个意义上讲，该解决方案不会使他的网站加载速度更快-除了他本人之外。

— 三月Örlygsson

3

@MárÖrlygsson及其支持者：尚未在运输层完成。在实际模型中，这都是在应用程序层中完成的。理论上流水线应该在会话层。

— 马特·乔纳

4

我不会与您争论这些语义。事实仍然是，Sam无法“使用流水线化”（保持原样）使访问者的网站加载速度更快，因为流水线支持是A）您指出自己时参差不齐，并且B）每个人都选择加入个人用户。

— 三月Örlygsson

6

并不是真正的问题答案，只是为了补充Marcel和yahelc给出的答案，我为404图标的问题提供了一个优雅的解决方案。

因为某些应用程序和浏览器会检查favicon.com，并且如果在网站根目录中未找到该图标，则只需使用204响应头响应请求即可。

Apache示例：

在您的.htacces或.conf中，Apache选项一（也是我最喜欢的），一个简单的衬里：

Redirect 204 /favicon.ico

Apache选项二：

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

为了进一步阅读，Stoyan Stefanov提供了不错的博客文章，网址为http://www.phpied.com/204-no-content/

— 安东尼·哈佐波洛斯
source

是的，但是由于正在发出请求，并且图标经常以有意义的方式使用，我认为值得提供图标而不是空响应。无论如何，通过gzip压缩图标通常会使它变成单个TCP数据包大小

— Andy Davies

5

这是个好主意，但如果Google尚未在首页上做到这一点，我敢打赌它目前（目前）无法完成

— cusimar9
source

13

Google很棒，但是那样的想法似乎适得其反。总是有新的，更好的和很有可能的做事方式，您不必为行业领导者而努力。

— 语法错误

8

显然，谷歌从SO那里得到了他们的想法，而不是

— 反过来

3

好的答案，如果google可以使他们的页面速度更快，他们会的。

— David d C e Freitas

4

抱歉，您不能将Favicon与其他资源结合使用。

这意味着您基本上有两个选择：

如果您对网站没有网站图标感到满意-您可以直接href指向已经加载的非图标资源（例如，样式表，脚本文件，甚至某些可以从预取中受益的资源）。）
（我的简短测试表明，该方法适用于大多数（如果不是全部）主要浏览器。）
接受额外的HTTP请求，只需确保您的favicon文件设置了激进的HTTP缓存控制标头即可。
（如果您可以控制其他网站，则甚至可以偷偷地预载该网站的网站图标-以及其他静态资源。）

PS Creative解决方案不起作用：

奇怪的CSS data-uri技巧（由评论者Felix Geenen链接）不起作用。
使用Javascript执行favicon <link>元素的延迟注入（由用户@yc建议）可能会使情况变得更糟-导致两个 HTTP请求。

— 马尔·奥尔格森
source

1

其他无效的解决方案：.ico中有多个图标，并在图片标签中使用ico，希望它会在那里显示另一张图片，而不是图标。将收藏夹图标与另一个文件合并在一起。

— markijbema 2011年

3

您可以使用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字符串：

base64 favicon.png

— 安德烈（Andrej）
source

2

这是最简单的方法：

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

它代表什么图标？在下面回答并投票！

— 罗伯顿
source

1

苹果图标？

— styfle

2

2020年的杀手级解决方案

该解决方案一定是在最初提出该问题后的九年提出的，因为直到最近，大多数浏览器还无法处理.svg格式的网站图标。

事实不再如此。

请参阅：https：//caniuse.com/#feat=link-icon-svg

1）选择SVG作为Favicon格式

目前，在2020年6月，这些浏览器可以处理SVG Favicons：

铬
火狐浏览器
边缘
歌剧
适用于Android的Chrome
KaiOS浏览器

请注意，这些浏览器仍然无法：

苹果浏览器
iOS Safari
Android版Firefox

考虑到以上所述，我们可以放心地使用SVG Favicon。

2）将SVG呈现为数据URI

这里的主要目的是避免HTTP请求。

正如其他解决方案所提到的，执行此操作的一种非常聪明的方法是使用Data URI而不是HTTP URL。

SVG（尤其是小型SVG）非常适合于Data URI，因为后者是简单的纯文本（任何可能含糊的字符百分比编码），而前者（即XML）可以写成一长行的纯文本（带有少量内容）百分比代码）。

3）整个 SVG都是表情符号

在2019年12月，Leandro Linares是第一个意识到自Chrome加入Firefox以来就支持SVG Favicons的人之一，值得尝试看看是否可以从表情符号中创建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"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

这是与数据URI相同的SVG ：

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

最后，这是Data URI作为Favicon：

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%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）。

例如，除了上面的白色Unicorn Favicon外，我们还可以通过应用过滤器轻松制作Black Unicorn Favicon：

style="filter: invert(100%);"

黑色独角兽图标：

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%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" />

— 鲁宁
source

0

页面上的每个图像都是一个单独的http请求。因此，没有必要对Favicon进行任何悲剧。

— 爆头
source

2

关键是他可以用所有其他图像制作一个spritesheet，因此它们只需要一个http请求，但是他不能使用他的收藏夹来这样做。

— 马丁·菲克斯曼（MartínFixman）2011年

2

谢谢，但我看不出这对我的问题有何贡献……更不用说答案了！（我不是投票否决您的人，但我也没有投票赞成您的“答案”。）如果您将其修改为对问题有帮助的（任何）内容，那将是值得投票的，正如@Fixman也说的那样。

— 山姆

2

尽管它没有回答问题，但确实提到您仅在询问“较大”问题的一部分。如果可以通过单个HTTP请求和连接传输整个站点，那就太好了。在这可能之前，对favicon.ico的另一个请求对我来说似乎是无语的。

— dyasta 2011年

一个很小的图标需要另一个HTTP请求是不是很愚蠢？如何将收藏夹图标放入子画面？

演示：turi.co/up/favicon.html

1）选择SVG作为Favicon格式

2）将SVG呈现为数据URI

3）整个 SVG都是表情符号

4）自己实施解决方案：

5）更多技巧