Question

133

How to prevent an HTTP request just for a favicon?

rated 0 times [ 136] [ 3] / answers: 1 / hits: 59596 / 14 Years ago, fri, march 4, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

guadalupec

Add To Favorites

Follow

Total Points: 610

Total Questions: 91

Total Answers: 91

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

answered 14 Years ago isham · Accepted 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

Nevertheless, 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

N.B. This step is optional. Your SVG can be a single emoji, but it can just as easily be a more complex SVG.

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" />