Written by

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:

https://pickjb.com/favicon.ico

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!

Good News

You can save this HTTP request using a newfangled technology called…

Data URI’s

This is pretty freakin’ fantastic! Basically, you get a textual representation of the contents of your image, and use that as your href value.

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?)

However, knowing this, I developed a way to cache these Data URI’s in a global JavaScript file. What it does is grab the element tags, which look like this:

<link rel="icon" href="data:," />
<link rel="shortcut icon" href="data:," />

Yes, that is an incomplete data URI. This is intentional.

Then, in the JavaScript, I set the href value to the generated data URI value. Use this code on every page in your site, cache the JavaScript file, and kapow! 💥

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!

Not every business needs a cutting edge experience, but when you want exceptional quality front-end web development work, remember me. Send me an email and we can talk about the details.

Get new posts by email 😎

Unsubscribe anytime. Privacy protected.