如何阻止仅针对 favicon 的 HTTP 请求？

发布于 2024-10-20 12:49:10 字数 369 浏览 2 评论 0原文

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

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

但愚蠢的是，我们只需要一个几个字节的小图标又一个可能影响速度的 HTTP 请求。

所以我想知道，如何才能使该图标成为可用精灵的一部分（例如，background-position=0px -200px;），同时兼作网站其余部分的徽标，例如为了加快网站速度并节省宝贵的 HTTP 请求。我们如何才能将其与我们的徽标和其他艺术品一起放入现有的精灵图像中？

原文

Everybody knows how to set up a favicon.ico link in their HTML:

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

But it's silly that for only a several-byte-tiny icon we need yet yet another potentially speed-penalizing HTTP request.

So I wondered, how could I make that favicon part of a usable sprite (e.g., background-position=0px -200px;) that doubles as, say, a logo on the rest of the website, in order to speed up the site and save that precious and valuable HTTP request. How can we get this to go into an existing sprite image along with our logo and other artworks?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

婴鹅 2024-10-27 12:49:10

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

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

回复收藏 0 原文

空城旧梦 2024-10-27 12:49:10

对 @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 JavaScript code would normally be in here too. */

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

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.

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.

File 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>
...

File 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 JavaScript code would normally be in here too. */

Demo: turi.co/up/favicon.html

回复收藏 0 原文

烏雲後面有陽光 2024-10-27 12:49:10

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

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

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

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

如果您担心旧的 Internet Explorer 版本（现在您可能不应该担心），您可以添加一个 Internet Explorer 条件注释，该注释将在传统的浏览器中加载实际的 favicon.ico方式，因为旧版 Internet Explorer 似乎不支持数据 URI 图标。

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

将 favicon.ico 文件包含在您的根目录中，以覆盖以任何方式请求它的浏览器，因为对于这些浏览器，如果它们已经在检查，无论您做什么，您最好不要用 404 响应浪费 HTTP 请求。

您还可以只使用另一个可能已缓存其网站图标的热门网站的网站图标，例如 http://google.com/favicon.ico，以便从缓存中提供服务。

正如评论者所指出的，仅仅因为您可以这样做并不意味着您应该这样做，因为无论我们设计什么技巧，某些浏览器都会请求 favicon.ico。与通过 gzip 压缩、对静态内容使用远期过期标头、缩小 JavaScript 文件、将背景图像放入精灵或数据 URI 等操作所节省的开销相比，这样做所节省的开销是微不足道的、通过 CDN 提供静态文件等。

You could try a data URI. No HTTP request!

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

Unless your pages have static caching, your favicon wouldn't be able to be cached, and depending on the size of your favicon image, your source code could get kind of bloated as a result.

Data URI favicons seems to work in most modern browsers; I have it working in recent versions of Chrome, Firefox and Safari on a Mac. Doesn't seem to work in Internet Explorer, and possibly some versions of Opera.

If you're worried about old Internet Explorer versions (and you probably shouldn't be these days), you could include an Internet Explorer conditional comment that would load the actual favicon.ico in the traditional way, since it seems that older Internet Explorer doesn't support data URI favicons.

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

Include the favicon.ico file in your root directory to cover browsers that will request it either way, since for those browsers, if they're already checking no matter what you do, you might as well not waste the HTTP request with a 404 response.

You could also just use the favicon of another popular site which is likely to have their favicon cached, like http://google.com/favicon.ico, so that it is served from cache.

As commenters have pointed out, just because you can do this doesn't mean you should, since some browsers will request favicon.ico regardless of the tricks we devise. The amount of overhead you'd save by doing this would be minuscule compared to the savings you'd get from doing things like gzipping, using far-future expires headers for static content, minifying JavaScript files, putting background images into sprites or data URIs, serving static files off of a CDN, etc.

回复收藏 0 原文

世态炎凉 2024-10-27 12:49:10

2020 年的杀手级解决方案

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

现在情况已不再是这样了。

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

1) 选择 SVG 作为 Favicon 格式

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

Chrome
Firefox
Edge
Opera
Chrome for Android
KaiOS 浏览器

请注意，这些浏览器仍然不能：

Safari
iOS Safari
Firefox for Android

尽管如此，考虑到上述情况，我们现在可以以合理的信心使用SVG Favicons。

2) 将 SVG 显示为数据 URL

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

正如本页上的其他解决方案所提到的，一种非常聪明的方法是使用数据 URL 而不是 HTTP URL。

SVG（尤其是小型 SVG）完美适合数据 URL，因为后者只是纯文本（任何可能不明确的字符都经过百分比编码），而前者是 XML，可以写为长文本一行明文（带有少量百分比代码）非常简单。

3) 整个 SVG 是一个表情符号

注意此步骤是可选的。您的 SVG可以是单个表情符号，但也可以轻松成为更复杂的 SVG。

2019 年 12 月，Leandro Linares 是最早意识到 Chrome 与 Firefox 一起支持 SVG Favicons 的人之一，因此值得尝试看看是否可以从表情符号创建一个 Favicon：

https://lean8086.com/articles/using-an-emoji- as-favicon-with-svg/

Linares 的预感是正确的。

几个月后（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">

Killer Solution in 2020

This solution necessarily comes nine years after the question was originally asked, because, until fairly recently, most browsers have not been able to handle favicons in .svg format.

That's not the case anymore.

See: https://caniuse.com/#feat=link-icon-svg

1) Choose SVG as the Favicon format

Right now, in June 2020, these browsers can handle SVG Favicons:

Chrome
Firefox
Edge
Opera
Chrome for Android
KaiOS Browser

Note that these browsers still can't:

Safari
iOS Safari
Firefox for Android

Nevertheless, with the above in mind, we can now use SVG Favicons with a reasonable degree of confidence.

2) Present the SVG as a Data URL

The main objective here is to avoid HTTP Requests.

As other solutions on this page have mentioned, a pretty smart way to do this is to use a Data URL rather than an HTTP URL.

SVGs (especially small SVGs) lend themselves perfectly to Data URLs, because the latter is simply plaintext (with any potentially ambiguous characters percentage-encoded) and the former, being XML, can be written out as a long line of plaintext (with a smattering of percentage codes) incredibly straightforwardly.

3) The entire SVG is a single Emoji

N.B. This step is optional. Your SVG can be a single emoji, but it can just as easily be a more complex SVG.

In December 2019, Leandro Linares was one of the first to realise that since Chrome had joined Firefox in supporting SVG Favicons, it was worth experimenting to see if a favicon could be created out of an emoji:

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

Linares' hunch was right.

Several months later (March 2020), Code Pirate Lea Verou realised the same thing:

https://twitter.com/leaverou/status/1241619866475474946

And favicons were never the same again.

4) Implementing the solution yourself:

Here's a simple SVG:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 16 16">

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

And here's the same SVG as a Data URL:

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

And, finally, here's that Data URL as a Favicon:

<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) More tricks (...these are not your parents' favicons!)

Since the Favicon is an SVG, any number of filter effects (both SVG and CSS) can be applied to it.

For instance, alongside the White Unicorn Favicon above, we can easily make a Black Unicorn Favicon by applying the filter:

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

Black Unicorn Favicon:

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

回复收藏 0 原文

深陷 2024-10-27 12:49:10

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

You could use a Base64-encoded favicon, like:

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

回复收藏 0 原文

花开半夏魅人心 2024-10-27 12:49:10

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

您将图标的 base64 数据放入外部样式表中，因此它将被缓存。在网站的头部，您必须使用 id 定义 favicon，并将该 favicon 设置为该 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>

I found an interesting solution on this page. It is in German, but you will be able to understand the code.

You put the base64 data of the icon into an external style sheet, so it will be cached. In the head of your website you have to define the favicon with an id and the favicon is set as a background-image in the style sheet for that id.

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

and the 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>

回复收藏 0 原文

不一样的天空 2024-10-27 12:49:10

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

回复收藏 0 原文

悲欢浪云 2024-10-27 12:49:10

这真的重要吗？

许多浏览器将图标作为低优先级加载，这样它就不会阻止页面加载，所以是的，这是一个额外的请求，但它不在任何关键路径上。

JavaScript 解决方案很糟糕，因为 JavaScript 代码已被检索并执行，下面的所有 DOM 元素都将被阻止渲染，并且不会减少请求数量！

回复收藏 0 原文

煮茶煮酒煮时光 2024-10-27 12:49:10

正确的解决方案是使用 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（不寒而栗）。

回复收藏 0 原文

柠檬心 2024-10-27 12:49:10

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

某些应用程序和浏览器会检查 favicon.ico 文件，如果在站点根目录中找不到该图标，您只需使用 204 响应标头。

Apache 示例：

Apache 选项一（也是我最喜欢的），.htacces 或 .conf 中的简单一行：

Redirect 204 /favicon.ico

Apache 选项二：

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

为了进一步阅读，有一个很好的 Stoyan Stefanov 的博客文章。

This is 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.

Some applications and browsers check for a favicon.ico file and if the icon is not found in the site root, you can simply respond to the request with the 204 response header.

Apache Examples:

Apache option one (and my favorite), a simple one-liner in your .htacces or .conf:

Redirect 204 /favicon.ico

Apache option two:

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

For further reading there is a nice blog post by Stoyan Stefanov.

回复收藏 0 原文

拍不死你 2024-10-27 12:49:10

这是一个好主意，但如果谷歌还没有在他们的主页上做到这一点，我敢打赌它（目前）无法做到。

回复收藏 0 原文

仄言 2024-10-27 12:49:10

抱歉，您无法将该图标与其他资源结合起来。

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

如果您对没有网站图标的网站感到满意 - 您可以将 href 指向已加载的非图标资源（例如，样式表、脚本文件，甚至是一些受益于预取的资源）。
（我的简短测试表明这适用于大多数（如果不是全部）主要浏览器。）
接受额外的 HTTP 请求，并确保您的 favicon 文件设置了积极的 HTTP 缓存控制标头。
（如果您控制着其他网站，您甚至可能让他们偷偷地预加载该网站的图标 - 以及其他静态资源。）

PS 创意解决方案 不起作用：

奇怪的 CSS 数据 URI 技巧（由评论者 Felix Geenen 链接）不起作用。
使用 JavaScript 执行 favicon 元素的延迟注入（如由用户 yc 建议）可能只会让事情变得更糟 - 导致两个 HTTP 请求。

回复收藏 0 原文

焚却相思 2024-10-27 12:49:10

您可以使用 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 或 convert 将 ICO 转换为 8 位 PNG：

convert favicon.ico -depth 8 -strip favicon.png

并使用 base64 命令将 PNG 二进制文件编码为 Base64 字符串：

base64 favicon.png

You can use an 8-bit PNG image instead of the ICO format for an even smaller data footprint. The only thing you have to change is using "data:image/png" instead of "data:image/x-icon" MIME type header:

<link
  href="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 work for me.

You can convert ICO to 8-bit PNG using GIMP or convert:

convert favicon.ico -depth 8 -strip favicon.png

And encode the PNG binary to a Base64-string using the base64 command:

base64 favicon.png

回复收藏 0 原文

很酷又爱笑 2024-10-27 12:49:10

这是最简单的方法：

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

它代表什么图标？下面回答一下！

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 does it represent? Answer below!

回复收藏 0 原文

~没有更多了~

关于作者

披肩女神

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何阻止仅针对 favicon 的 HTTP 请求？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

文件 index.html

文件 script.js

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

File index.html

File script.js

Demo: turi.co/up/favicon.html

1) 选择 SVG 作为 Favicon 格式

2) 将 SVG 显示为数据 URL

3) 整个 SVG 是一个表情符号

4) 自己实现解决方案：

1) Choose SVG as the Favicon format

2) Present the SVG as a Data URL

3) The entire SVG is a single Emoji

4) Implementing the solution yourself:

5) More tricks (...these are not your parents' favicons!)

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如何阻止仅针对 favicon 的 HTTP 请求？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

文件 index.html

文件 script.js

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

File index.html

File script.js

Demo: turi.co/up/favicon.html

1) 选择 SVG 作为 Favicon 格式

2) 将 SVG 显示为数据 URL

3) 整个 SVG 是一个表情符号

4) 自己实现解决方案：

1) Choose SVG as the Favicon format

2) Present the SVG as a Data URL

3) The entire SVG is a single Emoji

4) Implementing the solution yourself:

5) More tricks (...these are not your parents' favicons!)

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。