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

Question

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

Answer 1

I'm sorry, but you can't combine the favicon with another resource.

This means you have basically two options:

1. If you're comfortable with your site not having a favicon - you can just have the href point to a non-icon resource that is already being loaded (e.g. a style sheet, script file, or even some resource that benefits from being pre-fetched.)
   (My brief testing indicates that this works across most, if not all, major browsers.)

2. Accept the extra HTTP request and just make sure your favicon file has aggressive HTTP cache-control headers set.
   (If you have other websites under your control, you might even have them sneakily preload the favicon for this website - along with other static resources.)

P.S. Creative solutions that will not work:

• The the weird CSS data-uri trick (linked to by commenter Felix Geenen) does not work.
• Using Javascript to perform a delayed injection of the favicon <link> element (as suggested by user @yc) will likely just make things worse - by resulting in two HTTP requests.

Answer 2

You could use base64 encoded favicon, like:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" /> 

Answer 3

Good point and nice idea, but impossible. A favicon needs to be a single, separate resource. There is no way to combine it with another image file.

Answer 4

You could try a data URI. No HTTP request!

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

Unless your pages have static caching, your favicon wouldn't be able to be cached, and depending on the size of your favicon image, your source code could get kind of bloated as a result.

Data URI favicons seems to work in most modern browsers; I have it working in recent versions of Chrome, Firefox and Safari on a Mac. Doesn't seem to work in Internet Explorer, and possibly some versions of Opera.

If you're worried about Old IE (and you probably shouldn't be these days), you could include an IE conditional comment that would load the actual favicon.ico in the traditional way, since it seems that older Internet Explorer doesn't support Data URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `

2. Include the favicon.ico file in your root directory to cover browsers that will request it either way, since for those browsers, if they're already checking no matter what you do, you might as well not waste the HTTP request with a 404 response.

You could also just use the favicon of another popular site which is likely to have their favicon cached, like http://google.com/favicon.ico, so that it is served from cache.

As commenters have pointed out, just because you can do this doesn't mean you should, since some browsers will request favicon.ico regardless of the tricks we devise. The amount of overhead you'd save by doing this would be minuscule compared to the savings you'd get from doing things like gzipping, using far-future expires headers for static content, minifying JavaScript files, putting background images into sprites or data URIs, serving static files off of a CDN, etc.

Answer 5

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

Answer 6

You can use 8-bit PNG instead of ICO format for even smaller data footprint. Only thing you have to change is using "data:image/png" instead of "data:image/x-icon" MIME type header:

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

"type" attribute can be "image/png" or "image/x-icon", both works for me.

You can convert ICO to 8-bit png using gimp or convert:

convert favicon.ico -depth 8 -strip favicon.png

and encode PNG binary to base64 string using base64 command:

base64 favicon.png