Now, let’s say you wanted to use as your favicon. Ordinarily your first step would be to find hosting, but if you have no hosting on your blog, what will you do?
The solution lies in using so-called “data URIs“. The way this works is, you make an URI that actually contains the data of the image, hence the name.
“Now, how would I go about making such a ‘data URI’, wiseguy?” you might ask. Well, it’s pretty simple, you drop by Sveinbjorn Thordarson’s DataURLMaker (he’s got to be Icelandic — gotta love their names!), upload the icon you picked, and voilá, it gives you…an img tag?
But wait, this image tag isn’t an orginary image tag (image tag?), it stores the image data in the src attribute
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAABdElEQVRIx61VO47CMBAdh+1MSxBBCKXhAogOKi5BnZILQIMEooELpKTmEKRB0BDRICqaCFAChIbGDRKfYuVk12HWZndfY8l+M+/NeGQTUEQ2q+u6/nio8k+nMAxDQmQ8TSYoCo9G2229DmCazeb5HK98XxYvNSAGbDae57rxKgPGx4ykMEJcYa12PALsdoRMJgD9/nA4HieFp9P5fL1O8ler63WxALhcXJdSgHSaUkq7XcYYY6zXI6IB3kpM6LfodFqtRgPAsopFx4lnhGAtn800rd1OGuGJMGD8avV+HwwASiXTrFRezIDsjmXCqjxRJzLAK1YFr4ivqhB1NIzwXzPA82AFRjPAp/6vLVY17nm2nckAfMgIIizLth3n5+Sv4rACieyl8v39frmUV4Qhny8UymX8XMPebN8PgiBQT4jtY3mid0A84B1JBt5uh8M7tadSudxXg4ZhGMlPCp0BHhAb+Z5Q/Qo+82BAv8t3v18ZsKt+Ahx/EIqC7KtCAAAAAElFTkSuQmCC" width="16" height="16">
So what we do is, we pull this data URI out of the img tag, and put it into a link tag, like we would a normal shortcut icon URL.
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0 ...etc..."/>
Unlike me, you paste the whole code, of course; I just thought I’d spare you readers having to see that code again.
Moving back to the matter at hand, all that is left is to stuff that link tag into your header — or if you’re a blogger, the header of your template — et voilá, you have yourself a favicon that’s guaranteed to be there whenever your page is.
The icon will then work in most browsers, but sadly not in Internet Explorer 7. Why? Don’t ask. Just don’t. Tends to make your life easier when it comes to IE.
If you want simple proof that it works, well, look at the favicon of this page and the source code just above this paragraph.
If this has piqued your interest in getting a favicon, might I recommend favicon.cc, a Web2.0 favicon maker — which even supports this method!