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

2020/10/03 06:21 · javascript ·  · 0评论

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

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

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

2020年的杀手级解决方案

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

现在已经不是了。

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


1)选择SVG作为Favicon格式

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

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

请注意,这些浏览器仍然无法:

  • 苹果浏览器
  • iOS Safari
  • Android版Firefox

考虑到以上所述,我们现在可以以合理的信心使用SVG Favicons


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

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

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

@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

您可以尝试数据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]--> `
  1. 在根目录中包含favicon.ico文件,以涵盖将以两种方式请求它的浏览器,因为对于这些浏览器,如果无论您执行什么操作都已在进行检查,则您最好不要将HTTP请求浪费在404响应上。

您也可以只使用另一个可能受欢迎的网站的图标,例如http://google.com/favicon.ico,以便从缓存中获取图标

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

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

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

您将图标的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>

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

真的有关系吗?

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

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

正确的解决方案是使用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(shudder)。

并不是真正的问题答案,只是为了补充Marcelyahelc给出的答案我为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/

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

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

  1. 如果您对网站没有网站图标感到满意-您可以直接href指向已加载的非图标资源(例如,样式表,脚本文件,甚至某些可以从预取中受益的资源) 。
    (我的简短测试表明,该方法适用于大多数(如果不是全部)主要浏览器。)

  2. 接受额外的HTTP请求,只需确保您的favicon文件设置了激进的HTTP缓存控制标头即可。
    (如果您控制着其他网站,您甚至可以偷偷地预载该网站的网站图标-以及其他静态资源。)

PS Creative解决方案不起作用

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

这是一个好主意,但如果Google尚未在其首页上完成此操作,那么我敢打赌它目前(目前)无法完成。

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

这是最简单的方法:

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

它代表什么图标?请在下面回答并投票!

本文地址:http://javascript.askforanswer.com/yigehenxiaodetubiaoxuyaolingyigehttpqingqiushibushihenyuchunruhejiangshoucangjiatubiaofangruzi.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!