Favicons are my Favorite Pain in the AssWritten by Jeffrey Bennett
Favicons are the little itty bitty tiny icons that represent everything you do on your website. They have incredible visual power packed in such a small space.
They are often the same image used as a company’s logo, which is smart.
They were originally meant to differentiate many windows or tabs while glancing through a big group, so you didn’t have to look at each URL to figure out what page you needed to see.
They’re a beautiful thing. 😍
But when you don’t explicitly specify your favicon in your HTML document, browsers send a request to the root domain asking for an image that may not exist in the first place. For example:
This adds yet another HTTP request to the already waaaaaayyyy too large an overhead on the majority of websites these days.
And this can cause a very real performance impact for your end users.
That’s where the pain in the ass part comes in. 😝
But there is good news!
You can save this HTTP request using a newfangled technology called…
This is pretty freakin’ fantastic! Basically, you get a textual representation of the contents of your image, and use that as your
BAM! 💥 No more extra HTTP requests.
But wait, there’s more! 😍
Like with most performance tweaks, there are trade offs you should be aware of.
The inline text will add to the weight of the HTML page as well as be uncacheable (is that even a word?)
<link rel="icon" href="data:," /> <link rel="shortcut icon" href="data:," />
Yes, that is an incomplete data URI. This is intentional.
Cached data URI, no extra HTTP request, and now you have the benefit of using the data URI only once.
<script> var faviconOne = document.querySelector('link[rel="favicon"]'), faviconTwo = document.querySelector('link[rel="icon"]'), faviconDataUri = "data:image/png,ZZZ"; /* This is your favicon’s data URI. */ faviconOne.href = faviconDataUri; faviconTwo.href = faviconDataUri; </script>
ProTip: Generate your favicon’s data URI.
The average webpage is now 3MB. Ridiculousness!