favicon 俗称网站图标，作为网站的脸面每一个网站都不会少的，比如下图：
当在浏览器上我们打开网站的时候，浏览器会根据网站代码一般是：
<link rel="icon" href="/favicon.ico">
发送一个 HTTP 请求获取这个图标。
假如我们没有给网站指定图标的代码，浏览器依然会发送请求，默认请求网站根目录下的 favicon.ico。
现在网站不想要网站图标，浏览器的默认图标请求就没有意义了，对服务器来讲浪费了一次 HTTP 请求，如何避免服务器接受浏览器这次无意义的请求呢？
网站需要的图标本身是一个图片，如果我们把需要的图片变成代码不就没有请求了吗，前端有什么技术可以用来表示（图片）文件呢？你肯定想到了 Base64。
浏览器有两个 API 可用：btoa 和 atob。
btoa("Hello, World!")
'SGVsbG8sIFdvcmxkIQ=='
atob('SGVsbG8sIFdvcmxkIQ==')
'Hello, World!'
现在还有一个问题，如何把 Base64 放到 link 标签的 href 中展示，这就是今天介绍的一个重点技术 Data URLs 技术，允许内联展示小文件。
Data URLs 的语法如下：
data:[<mediatype>][;base64],<data>
语法分为四部分：
- 必须的前缀：
data:。 - 可选的
<mediatype>描述数据的 MIME 类型，默认text/plain;。 - 可选的
;base64编码格式，默认charset=US-ASCII。 - 数据本身。
所以根据语法最简单的一个符合 Data URLs 是 data:,。
更多例子，例如展示一段文本 Hello, World!
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
使用 Base64 展示一张 PNG 图片：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA0hJREFUaEPtmE9IFFEcx7+/t2Z5MHWGiLCIyFcEUtChwEtKHvpzCYJueekP7axZGPTHCPOQJQRpOqOlQSGdPNS1LnrzEF0kK92VgiTosKN4ktL3YmZnbZPdddxZd92aue3y+735fn7f3/u9t0so8IcKXD98gHw76DvgO+CxAn4LeSyg53TfgVQlVPTJKyDqBPAGDM3mJf7Rc7mTLJB9B1o/FKtbN3ZKILj0PolpEJpNjQ9lGyKrABW9kWoCOiHl0ZhQegHIegCV9kcp2szQ3rvZhMgagNI7eRqSdQNymy0daIlq/L6iR2qIZLsEjjjCh0yNn8kWRFYAVCPcIoF7jqhJIroZDVa9ioss7fmkbqCiDhDOOd+NQ+CC2chHvYJ4AigzxioYSroIOGt3CPCaFnDbbEq+YSuMqRsE0Q6AxToMzWaQP/ICkTGA+uTLYSEWDJI46Ihvn/lRdQdtJNIJUo2JUxKsA8AeJ+6ZqfHzmUJkBKDqkQZJsh9AMYB5IlyMBvmgWxFl3Z93BRjrAdEJx4lRM8hr3OYnxq0aQNUjHZLk9VjV6T2TFIyGdr/L5OVKb+QhpLzm5M5B4Nhq94VrAOVxeDuKqA+QJ52WGaQFNJpNfC4T8fEcVZ9okJYbEqWZ7AtXAKoxVS8hBgDstMUTbs0E+QMvwhNzy/smDjDBngI4tNpRuyKAYoSvAvgzKdbgMIrDKEZYLoFJTJshvmOlIqUFUIxIPyDtCSGBEQJq1+I0TQoQ/1KgJt2+SAmwRY9ULZIM2+Na4qUgVOYKQCyijgWoC5D7AYybGq9O5UR6B/QJ+95i3V8qjPBwLgFEyaaxop/zfZAYMEP8bUYAiUm5Bpi9zEdW6n+7O9wEWTH/DYDitF3KwhCzejrp74L4FLL2QF4cKO8O17IAhtO5ak2zGY3XJYtZVwCW0OUirSFQMACmxv/aX3ZrEWv1AZbZmtUplLgHfAfycQ78Uw5YszyxXRkTtetiEycbj4lC7ftSmiddfjx3bQ4yPawRQXd79fAQ993UeOyPMBeP6ym0eeCbEvg1f5yE4C7WzThEMPF8Nrjvq9sFXAO4XTDXcT5Ariue5H6Vbwne3u+3kLf6ec/2HfBeQ28rFLwDvwH1J+FAFl7TbAAAAABJRU5ErkJggg==
使用 Base64 展示 SVG图片：
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjcxNzg3OTM4OTUwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2OTYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik0yNjcuMTY4IDQ1NC42MjR2MzE2LjQ4aDE1MlY1OTguMjI0YzAtNi4xNDQgNC45OTItMTEuMTIgMTEuMTM2LTExLjEyaDE2OS43MjhjNi4xNiAwIDExLjEzNiA0Ljk3NiAxMS4xMzYgMTEuMTJ2MTcyLjg4aDEzNlY0NTMuNmwtMjM5LjM2LTE4OC44NDgtMjQwLjY0IDE4OS44NTZ6IG0tNDggMzcuODcybC0zOS4zNiAzMS4wNGExNiAxNiAwIDAgMS0yMi40NjQtMi42NTZsLTkuOTA0LTEyLjU2YTE2IDE2IDAgMCAxIDIuNjU2LTIyLjQ2NGwzNDcuNzkyLTI3NC40MTZhMTYgMTYgMCAwIDEgMTkuODQgMGwzNDcuNzkyIDI3NC40YTE2IDE2IDAgMCAxIDIuNjU2IDIyLjQ4bC05LjkyIDEyLjU2YTE2IDE2IDAgMCAxLTIyLjQ2NCAyLjY1NmwtNDAuNjI0LTMyLjA0OHYyOTIuNDhhMzUuMTM2IDM1LjEzNiAwIDAgMS0zNS4xMzYgMzUuMTM2SDI1NC4zMDRhMzUuMTM2IDM1LjEzNiAwIDAgMS0zNS4xMzYtMzUuMTM2VjQ5Mi40OTZ6IG0yNDggMjcwLjYwOGg5NnYtMTI4aC05NnYxMjh6IiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIyNjk3Ij48L3BhdGg+PC9zdmc+
还可以直接展示 SVG 图片：
data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M267.168%20454.624v316.48h152V598.224c0-6.144%204.992-11.12%2011.136-11.12h169.728c6.16%200%2011.136%204.976%2011.136%2011.12v172.88h136V453.6l-239.36-188.848-240.64%20189.856z%20m-48%2037.872l-39.36%2031.04a16%2016%200%200%201-22.464-2.656l-9.904-12.56a16%2016%200%200%201%202.656-22.464l347.792-274.416a16%2016%200%200%201%2019.84%200l347.792%20274.4a16%2016%200%200%201%202.656%2022.48l-9.92%2012.56a16%2016%200%200%201-22.464%202.656l-40.624-32.048v292.48a35.136%2035.136%200%200%201-35.136%2035.136H254.304a35.136%2035.136%200%200%201-35.136-35.136V492.496z%20m248%20270.608h96v-128h-96v128z%22%20fill%3D%22%231296db%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E
展示内容用到了 URL 编码（或叫百分比编码）
encodeURIComponent(`<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M267.168 454.624v316.48h152V598.224c0-6.144 4.992-11.12 11.136-11.12h169.728c6.16 0 11.136 4.976 11.136 11.12v172.88h136V453.6l-239.36-188.848-240.64 189.856z m-48 37.872l-39.36 31.04a16 16 0 0 1-22.464-2.656l-9.904-12.56a16 16 0 0 1 2.656-22.464l347.792-274.416a16 16 0 0 1 19.84 0l347.792 274.4a16 16 0 0 1 2.656 22.48l-9.92 12.56a16 16 0 0 1-22.464 2.656l-40.624-32.048v292.48a35.136 35.136 0 0 1-35.136 35.136H254.304a35.136 35.136 0 0 1-35.136-35.136V492.496z m248 270.608h96v-128h-96v128z" fill="#1296db"></path></svg>`)
利用可编辑的 HTML 元素，甚至可以直接创建一个记事本：
data:text/html;charset=utf-8,<html contenteditable></html>
回到上面的问题，「如何避免浏览器对网站图标发起请求」，最简单的就是下面这样做：
<link rel="icon" href="data:,">
完~
灵感来源：
