每个人都知道如何在他们的 HTML 中设置 favicon.ico 链接：
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
但愚蠢的是，对于一个只有几个字节的小图标，我们还需要 另一个可能会降低速度的 HTTP 请求 。
所以我想知道，我怎样才能使网站图标成为可用精灵（例如，background-position=0px -200px;）的一部分，它可以兼作网站其余部分的徽标，以加快网站速度并保存宝贵的 HTTP 请求。我们怎样才能让它与我们的标志和其他艺术品一起进入现有的精灵图像？
background-position=0px -200px;
2020 年的杀手级解决方案
这个解决方案必然是在最初提出这个问题九年后才出现的，因为直到最近，大多数浏览器还不能处理.svg格式的网站图标。
.svg
现在不是这样了。
见：https ://caniuse.com/#feat=link-icon-svg
现在，在 2020 年 6 月，这些浏览器可以处理 SVG Favicon ：
请注意，这些浏览器仍然不能：
尽管如此，考虑到上述情况，我们现在可以放心地使用 SVG Favicon 。
这里的主要目标是避免 HTTP 请求。
正如本页上的其他解决方案所提到的，一个非常聪明的方法是使用 Data URL 而不是 HTTP URL 。
SVG（尤其是小型 SVG） 非常 适合数据 URL，因为后者只是纯文本（任何可能有歧义的字符以百分比编码），而前者是 XML，可以写成一长串纯文本（带有少量百分比代码）非常简单。
注意 此步骤是可选的。您的 SVG 可以 是单个表情符号，但也可以很容易地成为更复杂的 SVG。
2019 年 12 月， Leandro Linares 是最早意识到 Chrome 已加入 Firefox 以支持 SVG 图标的人之一，因此值得尝试看看是否可以从表情符号中创建图标：
https://lean8086.com/articles/using-an-emoji-as-favicon-with- svg/
利纳雷斯的预感是对的。
几个月后（2020 年 3 月），Code Pirate Lea Verou 意识到了同样的事情：
https://twitter.com/leaverou/status/1241619866475474946
网站图标再也不会一样了。
这是一个简单的 SVG：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <text x="0" y="14">
