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
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" />
Thanks Rounin! Brilliant! SVG is resizable too so in another 9 years we will have an option to choose how large we want favicons to be on webbrowser tabs. Choose from:
16x1632x3264x64128x128Being the original poster, its invigorating to see 9 years later folks still care, about the little things that make life more beautiful, more enjoyable, snappier or just more elegant! :)Your question was entirely prescient, @Sam. When you asked it in 2011, Steve Souders had long established that round-trips to the server should be eliminated wherever possible. But for years afterwards, the favicon defiantly demanded its own dedicated round-trip. Thankfully that's no longer the case due to the (belated but much welcomed) collective support from the browser makers for SVG-based favicons. (I only came across this issue in my endeavour - still a work-in-progress, but I'll return to it soon - to create a single-file Progressive Web App.
<IMG src="data:image/svg...">has worked for years, I use it in the 52 PlayingCards Custom Element 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. Thexlinkis deprecated, not required. Brings the data URI down to:data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text x='0' y='14'>🦄</text></svg>(tested in Chrome)After some tweaking of viewBox to
20x20and x,y positions to-1,15.5I would say this is the playground to start from when using Emoji characters:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect width='100%' height='100%' fill='hotpink'/><text x='-1' y='15.5' stroke='red'>😎</text></svg>"(tested on Chrome & FireFox) Firefox respects the Emoji icon color designs, Chrome does not.Good contributions, @Danny'365CSI'Engelman, thanks. I wasn't aware that
xlink:hrefis 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%20with whitespace literals but I'm reluctant... because, copy-pasted and edited by laypeople, whitespace literals can become newline literals etc.