353

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Sam
  • 15,254
  • 25
  • 90
  • 145
  • 1
    I'd look at optimizing the current number of requests first. Depending on what the site holds, 35 requests could potentially be a lot. Look at sprite-sheets, combinied/minified JS etc. The favicon looks like a losing battle. – Hux Apr 05 '11 at 21:41
  • @MiG there are so many of those useless HTTP request.. another famous one, that many websites use, is the `dot.gif` placeholder. Which Jquery-enabled site doesnt use them, a? and how about repeating backgrounds that cannot be part of a sprite? the list is endless... well not endless: about 35 !! – Sam Apr 06 '11 at 00:30
  • 2
    I wish browsers could look into zip files. For example, be able to link like this "/folder/resources.zip/styles.css", "/folder/resources.zip/scripts.js". – rmac Apr 15 '11 at 07:37
  • @rmac +1 for awesome insight! my acdsee can do that, why cant browsers, indeed. This could be valuable tool for webdesigners wanting to package stuff in various versions `Design1_JAN.zip` `Design2_FEB.zip` etc... neat just two files on server representing entire whole sites with php and all... – Sam Apr 15 '11 at 08:16
  • So today I was able to do it using NGINX/HTTP2 on my Linux Box.... ` ` – buycanna.io Sep 02 '18 at 10:42
  • 1
    I replaced the CSS tag with SVG since none of the solutions below use CSS and you accepted an SVG answer, and I replaced the performance tag with a more specific HTTP tag since that's the technical thing you are concerned about here ("performance" is vague and arguably a bad tag). – TylerH Jul 25 '22 at 15:24

14 Answers14

166

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

James Anderson
  • 27,109
  • 7
  • 50
  • 78
  • 5
    The browser will still make a HEAD call even if it's in the browser cache so you will still have the overhead of an HTTP request. – dietbuddha Apr 05 '11 at 05:27
  • 3
    Actually everything depends on the browser. Most of them will _always_ look for for a favicon in some locations even if the page doesn't mention it and make a HEAD call for every refresh. – David Costa Apr 13 '11 at 15:06
  • 14
    The favicon needs a long expiring header just like any good static resource. With that, even the HEAD calls are suppressed. – Paul Alexander Apr 14 '11 at 18:12
153

A minor improvement to @yc's answer is injecting the Base64-encoded favicon from a JavaScript file that would normally be used and cached anyway, and also suppressing the standard browser behavior of requesting favicon.ico by feeding it a data URI in the relevant meta tag.

This technique avoids the extra http request and is confirmed to work in recent versions of Chrome, Firefox and Opera on Windows 7. However it doesn't appear to work in Internet Explorer 9 at least.

File index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

File script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JavaScript code would normally be in here too. */

Demo: turi.co/up/favicon.html

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Marcel
  • 27,922
  • 9
  • 70
  • 85
  • 2
    This is a horrible solution... The JS will block the rendering of DOM elements below it whereas the favicon can be deferred until later – Andy Davies Sep 17 '12 at 08:12
  • @AndyDavies: There are many ways to mitigate this problem. You could either use a JavaScript loader (what I normally do), call your scripts at the bottom of the document (generally recommended anyway) or just use the `defer` attribute on the script tag. – Marcel Sep 17 '12 at 10:49
  • 1
    @marcel Indeed, someone could do those things but unless the JS is merged into another JS file then the solution doesn't avoid an extra request. Surely the real solution is not to specify – Andy Davies Sep 17 '12 at 11:11
  • 1
    Having href="#" will in some browsers make the browser do a second request for the page it's already on, thus wasting even more time&resources. – Matsemann Nov 30 '12 at 11:28
  • @Matsemann: On [this answer](http://stackoverflow.com/a/4691949/154877) he confirmed IE8 was fine and in the comments it was mentioned Safari requested the page again. I'm not sure which version but I've tested Safari 6.0.2 on OS X and I can confirm it doesn't request the page twice. – Marcel Dec 01 '12 at 23:09
  • 1
    While this answer is quite creative, the implementation is just beyond silly. – Cypher May 03 '13 at 17:53
  • 1
    @Marcel even more than half the size! I downloaded both your PNG and ICO version of the stack overflow icon (from your comment here at Apr 10 2011 at 12:05), and it seems that the original ICO file is over 5,30 KB while your PNG version is 486 bytes... thats not half, thats more than TEN FOLD smaller in size mate :) Awesome discovery and nobody who noticed this in all those 6 years :P – Sam May 23 '17 at 07:59
  • In the case where the user visits multiple pages all with the same favicon, won't this effectively undo the benefits of caching? Maybe make sense for simple single page sites. – ChrisFox Jul 25 '18 at 08:43
  • I'd just inline the base64. No extra request, and way less maintenance overhead. – oligofren Oct 30 '18 at 09:33
108

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 Internet Explorer versions (and you probably shouldn't be these days), you could include an Internet Explorer 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]--> `
  1. 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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Yahel
  • 37,023
  • 22
  • 103
  • 153
  • I was looking up whether or not it would work for `href`. I know that works for `src` attributes, but I wasn't sure if it would be treated similarly. – zzzzBov Mar 04 '11 at 22:32
  • Brilliant idea, and could be [supported even by IE8!](http://msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx) (No dice on IE6/7, of course)... Very interested to see whether this is doable – Pekka Mar 04 '11 at 22:34
  • Here's my sample. http://yahelc.com/favicon-datauris.html (It's a half-assed screenshot of the Google favicon that I converted to its data uri equivalent. – Yahel Mar 04 '11 at 22:39
  • Confirmed in Chrome 9 and Firefox 3.6.14, both on Windows 7 – Pekka Mar 04 '11 at 22:43
  • 1
    @Pekka yeah, its not really a practical solution, since the data URI extra byte-weight on un-cached pages would probably outweigh the weight of that HTTP request. Maybe OP can inject the favicon into the DOM asynchronously. – Yahel Mar 04 '11 at 22:50
  • @yc that is a nice idea as well, but it's outside the DOM! – Pekka Mar 04 '11 at 23:04
  • @Pekka, can you please say what you mean by "outside the DOM!?" and what are the consequences of that data:... being outside the DOM? – Sam Mar 04 '11 at 23:08
  • 4
    @Sam I'm sorry, I understand what @yc means now, my mistake. Of course you can perfectly access the `` element in the browser through JavaScript, that should be possible. I have even seen [a game](http://www.p01.org/releases/DEFENDER_of_the_favicon/) programmed that way... however it does not seem to work in IE, either, and it will probably not prevent the default `/favicon.ico` lookup request – Pekka Mar 04 '11 at 23:13
  • 2
    @Pekka, I see. PS thats an increcible game! Puts my entire screen realestate into shame, since all you need is that 16x16 pixels haha. This hyperlink opens some possibilities as to whats actually possible with that favicon. – Sam Mar 04 '11 at 23:17
  • 3
    In case of a missing favicon declaration, *all* browsers will automatically request the default URL `/favicon.ico` in a blind attempt at locating it. So if you leave out the favicon `` (to later add it via Javascript) you're likely just making things worse. – Már Örlygsson Mar 15 '11 at 23:12
  • 2
    Just use favicon.ico to store your transparant gif :) – markijbema Mar 17 '11 at 00:18
  • Provided it works, data is a great suggestion. Extra weight doesn't matter that much provided your pages are statically cached. And even if not, the little extra weight on every page may be easily balanced by having a connection less to deal with. – tacone Mar 19 '11 at 14:26
  • 1
    @tacone I think the consensus is that it only seems to work in FF, Chrome, and Safari. IE and Opera do not appear to allow this. You can cover IE with a Conditional comment, though. – Yahel Mar 19 '11 at 14:34
  • 1
    This answer was posted in 2011; it's now 2022 and the Data URI approach doesn't seem to be working for me in Safari. (v15.3, Monterey 12.2) -- can anyone else here confirm? – Case Feb 14 '22 at 19:52
65

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" />
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 2
    ```` has worked for years, I use it in the [52 PlayingCards Custom Element](https://cardmeister.github.io) I presume they use the same parsing code for favicon. No need to escape everything for the DataURI, Only escape **#** and use single quotes only. The ``xlink`` [is deprecated](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href), not required. Brings the data URI down to: ``data:image/svg+xml,`` (tested in Chrome) – Danny '365CSI' Engelman Jul 17 '20 at 11:47
  • 2
    After some tweaking of viewBox to ``20x20`` and x,y positions to ``-1,15.5`` I would say this is the playground to start from when using Emoji characters: ``href="data:image/svg+xml,"`` (tested on Chrome & FireFox) Firefox respects the Emoji icon color designs, Chrome does not. – Danny '365CSI' Engelman Jul 17 '20 at 12:23
  • 1
    Good contributions, @Danny'365CSI'Engelman, thanks. I wasn't aware that `xlink:href` is now deprecated but I've removed it from wherever it appeared above anyway since it had no business being in a favicon SVG. Separately, I see your argument for replacing `%20` with whitespace literals but I'm reluctant... because, copy-pasted and edited by laypeople, whitespace literals can become newline literals etc. – Rounin Jul 17 '20 at 13:06
  • 1
    Also relevant to this discussion: [Are you using SVG favicons yet? A guide for modern browsers.](https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df) by Antoine Boulanger (April 19th, 2020) – Rounin Sep 12 '20 at 22:18
  • Why set `viewbox` and `y="14"` rather than just setting `y` and `font-size` as Leandro did in the link provided? https://leandrolinares.com/blog/using-emoji-as-favicon/ – Sinjai Oct 14 '22 at 21:00
  • @Sinjai - Fair question. Personally, I tend not to write SVGs without `viewBoxes`. I like the extra control that an explicitly declared `viewBox` gives. Of course anyone who doesn't need a `viewBox` and is happy to skip it is welcome to. – Rounin Oct 14 '22 at 22:27
24

You could use a 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" />
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
dcai
  • 2,557
  • 3
  • 20
  • 37
17

I found an interesting solution on this page. It is in German, but you will be able to understand the code.

You put the base64 data of the icon into an external style sheet, so it will be cached. In the head of your website you have to define the favicon with an id and the favicon is set as a background-image in the style sheet for that id.

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

and the html

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Felix Geenen
  • 2,465
  • 1
  • 28
  • 37
  • 1
    I can confirm that this **does work** on Chrome 83 and Firefox ESR 68 on Ubuntu 20.04, and I can confirm that it **does not work** to prevent the hit on /favicon.ico. So you get the image but you do not prevent the extra SSL connect. Since that was the goal, this is a failure. – Wil Jun 05 '20 at 08:44
14

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 1
    Maybe I'm blind, but the only place I'm seeing the Google Search favicon is in a sprite: http://www.google.com/search?q=foo – Yahel Mar 04 '11 at 22:21
  • 4
    @yc http://www.google.com/favicon.ico is the place where browsers will automatically look it up – Pekka Mar 04 '11 at 22:23
  • 3
    @yc you are not blind, you proved yourself worthy of a very creative answer up there... as Pekka pointed out already the `/favicon.ico` is where browsers will auto look. Now comes the real bad news: If the favicon is NON existent, it means an error 404 penalty which will cause a slight delay too!! There seems no escaping from this favicon dungeon. They are so tiny but oh so mighty... dammit :) – Sam Mar 04 '11 at 23:03
  • 8
    It should be noted that this should, realistically, be a one time request, pretty much forever. As with everything else, long cache timers and proper 301's returned by the server will make the favicon request a moot point (unless it doesn't exist - yikes!). – Kevin Peno Mar 18 '11 at 16:34
  • Also of note: for some reason or another Google Toolbar for IE requests favicons using .gif extension (not sure if they've fixed it by now, but was like this when last I checked). – Morten Mertner Mar 18 '11 at 22:18
  • I always liken this to getting the total row count when doing a `TOP n` SQL query, seems like a major oversight in the standard meta-data of a "get" in both cases. – Nick Craver Mar 19 '11 at 12:55
9

Does it really matter?

Many browsers load the favicon as a low priority so that it doesn't block the page load in anyway, so yes it's an extra request, but it's not on any critical path.

A JavaScript solution is horrible because JavaScript code has been retrieved and executed, all the DOM elements below will be blocked from rendering and it doesn't reduce the number of requests!

TylerH
  • 20,799
  • 66
  • 75
  • 101
Andy Davies
  • 5,794
  • 2
  • 26
  • 21
7

The proper solution is to use HTTP pipelining.

HTTP pipelining is a technique in which multiple HTTP requests are written out to a single socket without waiting for the corresponding responses. Pipelining is only supported in HTTP/1.1, not in 1.0.

It's required that servers support it, but not necessarily participate.

HTTP pipelining requires both the client and the server to support it. HTTP/1.1 conforming servers are required to support pipelining. This does not mean that servers are required to pipeline responses, but that they are required not to fail if a client chooses to pipeline requests.

Many browser clients don't do it, when they should.

HTTP pipelining is disabled in most browsers.

  • Opera has pipelining enabled by default. It uses heuristics to control the level of pipelining employed depending on the connected server.
  • Internet Explorer 8 does not pipeline requests, due to concerns regarding buggy proxies and head-of-line blocking.
  • Mozilla browsers (such as Mozilla Firefox, SeaMonkey and Camino), support pipelining however it is disabled by default. It uses some heuristics, especially to turn pipelining off for IIS servers.
  • Konqueror 2.0 supports pipelining, but it's disabled by default.[citation needed]
  • Google Chrome does not support pipelining.

I would recommend you try enabling pipelining in Firefox and try it there, or just use Opera (shudder).

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Matt Joiner
  • 112,946
  • 110
  • 377
  • 526
  • 7
    Pipelining an optimization done in the transport layer. It still involves a separate HTTP round-trip for the favicon, which is what the question asks about. – Már Örlygsson Mar 17 '11 at 09:10
  • @Már Örlygsson that is not correct. A round trip means that the client must make a request and then wait for the request to be processed and the answer to be dowloaded. Pipelining means that the request will already be sent while still waiting for the previous request to finish, so while the same steps are happening, the delay it will cause will not be the same... – Peter Mar 19 '11 at 13:26
  • 1
    Sam can't turn pipelining on in all of his visitors' browsers, so in that sense this solution won't make his site load faster - except for him personally. – Már Örlygsson Apr 10 '11 at 16:26
  • 3
    @Már Örlygsson and his upvoters: It's not done in the tranport layer. In real-world models this is all done in the application layer. Theoretically pipelining should be at the session layer. – Matt Joiner Apr 10 '11 at 23:30
  • 4
    I won't argue those semantics with you. The fact still holds that Sam can't "use pipelining" (neat as it is) to make his site load faster for his visitors, as piplining support is A) spotty as you point out yourself, and B) opt-in by each individual user. – Már Örlygsson Apr 10 '11 at 23:45
6

This is not really an answer to the question, but simply to compliment the answers given by Marcel and yahelc. I offer an elegant solution to the 404 favicon issue.

Some applications and browsers check for a favicon.ico file and if the icon is not found in the site root, you can simply respond to the request with the 204 response header.

Apache Examples:

Apache option one (and my favorite), a simple one-liner in your .htacces or .conf:

Redirect 204 /favicon.ico

Apache option two:

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

For further reading there is a nice blog post by Stoyan Stefanov.

Anthony Hatzopoulos
  • 10,437
  • 2
  • 40
  • 57
  • 1
    Yeh but as the request is being made and the favicon is often used in a meaningful way I reckon it's worthwhile providing the icon rather than an empty response. Compressing the icon via gzip will often get it to a single TCP packet size anyway – Andy Davies Sep 17 '12 at 08:09
5

It's a great idea, but if Google hasn't done it on their homepage, I'm betting it can't (currently) be done.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
cusimar9
  • 5,185
  • 4
  • 24
  • 30
5

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 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.
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Már Örlygsson
  • 14,176
  • 3
  • 42
  • 53
  • 1
    other solutions that won't work: multiple icons in a .ico, and using the ico in an image tag in the hope that it will display another picture there, than as favicon. Catting together the favicon with another file. – markijbema Mar 17 '11 at 00:09
3

You can use an 8-bit PNG image instead of the ICO format for an even smaller data footprint. The 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 work for me.

You can convert ICO to 8-bit PNG using GIMP or convert:

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

And encode the PNG binary to a Base64-string using the base64 command:

base64 favicon.png
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
andrej
  • 4,518
  • 2
  • 39
  • 39
2

Here's the easiest way:

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

What icon does it represent? Answer below!

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
rjobidon
  • 3,055
  • 3
  • 30
  • 36