Isn’t it silly that a tiny favicon requires yet another HTTP request? How can I put the favicon into a sprite?

Everybody knows how to set up a favicon.ico link in their HTML:

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

But it’s silly that for only a several-byte-tiny icon we need yet yet another potentially speed-penalizing HTTP request.

So I wondered, how could I make that favicon part of a usable sprite (e.g. background-position=0px -200px;) that doubles as say a logo in the rest of the website, in order to speed up the site and save that precious and valuable HTTP request. How can we get this to go into an existing sprite image along with our logo and other artworks?

Answer

Killer Solution in 2020

This solution necessarily comes nine years after the question was originally asked, because, until fairly recently, most browsers have not been able to handle favicons in .svg format.

That’s not the case anymore.

See: https://caniuse.com/#feat=link-icon-svg


1) Choose SVG as the Favicon format

Right now, in June 2020, these browsers can handle SVG Favicons:

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Chrome for Android
  • KaiOS Browser

Note that these browsers still can’t:

  • Safari
  • iOS Safari
  • Firefox for Android

With the above in mind, we can now use SVG Favicons with a reasonable degree of confidence.


2) Present the SVG as a Data URL

The main objective here is to avoid HTTP Requests.

As other solutions on this page have mentioned, a pretty smart way to do this is to use a Data URL rather than an HTTP URL.

SVGs (especially small SVGs) lend themselves perfectly to Data URLs, because the latter is simply plaintext (with any potentially ambiguous characters percentage-encoded) and the former, being XML, can be written out as a long line of plaintext (with a smattering of percentage codes) incredibly straightforwardly.


3) The entire SVG is a single Emoji

In December 2019, Leandro Linares was one of the first to realise that since Chrome had joined Firefox in supporting SVG Favicons, it was worth experimenting to see if a favicon could be created out of an emoji:

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

Linares’ hunch was right.

Several months later (March 2020), Code Pirate Lea Verou realised the same thing:

https://twitter.com/leaverou/status/1241619866475474946

And favicons were never the same again.


4) Implementing the solution yourself:

Here’s a simple SVG:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

And here’s the same SVG as a Data URL:

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

And, finally, here’s that Data URL as a 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) More tricks (…these are not your parents’ favicons!)

Since the Favicon is an SVG, any number of filter effects (both SVG and CSS) can be applied to it.

For instance, alongside the White Unicorn Favicon above, we can easily make a Black Unicorn Favicon by applying the filter:

style="filter: invert(100%);"

Black Unicorn 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'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

Leave a Reply

Your email address will not be published. Required fields are marked *