Image 01 Image 02

Favicons for the hostless

Posted on 21st August 2008 by Sebastian
1

If you have an externally hosted blog (at, say, Blogger, LiveJournal, …), you might miss the ability to have a shortcut icon, or a favicon, as it’s often called.

Favicons in action

Favicons in action

What a favicon is, in case you don’t know, is a small icon (usually 16×16 pixels), that is displayed next to the address bar in most browsers.

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?

Sure, you could trust a host such as TinyPic or ImageShack, but you never really know if they’ll take it down or whatnot.

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!



1
Response to.. Favicons for the hostless

1

[…] you recall my favicon article, IE doesn’t support data URIs, while just about any other browser […]



Leave a reply...