Javascript – How to save up another precious HTTP-request for the tiny favicon


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

<link rel="shortcut icon" href="" 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?

Best Solution

I think for the most part it does not result in another HTTP request as these are usually dumped in the browser's cache after the first access.

This is actually more efficient than any of the proposed "solutions".