Save to Delicious (
Del.icio.usFavicons. Those little icons that appear on FireFox's tabs, IE's favorites bar, and various other places in web-related applications. Simple little icons, no larger than 32 pixels square, yet they are a part of your site's identity.
Why have a favicon? Kiseki.co.uk puts it well:
A favicon can help people identify your site quickly and easily in, say, a long list of bookmarks....It is only a small detail, but it can be useful for people to recognise your site.
A favicon is an instant visual cue that, when a visitor sees it, conjures your website in their minds. As AbstractPromotion.com says, "If you don’t have a favicon, your users will forget about you".
Making a favicon is fairly straightforward: churn up your creative juices, fire up the gimp, create a new 16x16px or 32x32px image, brand away, save as an ICO, GIF, or PNG file, then upload the image to a file hosting site. I personally enjoy Village Photos' free account, though there's always PhotoBucket, ImageShack, or Google's own Picasa service. After the image is web-accessible, add the following lines to the <head> section of your blog HTML template:
<link href='http://host.com/path/to/image.png' rel='shortcut icon' type='image/png' />
<link href='http://host.com/path/to/image.png' rel='icon' type='image/png' />
And, voila! You should obviously replace the href and type attributes to fit your situation. For type, use image/png for PNG, image/gif for GIF, and image/ico for ICO, in case you were wondering :)
Why two nigh-identical tags? To answer a question with a question, what browser has, in decades past, caused us all so much pain? That's right. It seems that older versions of IE need the "shortcut icon" link just to see the favicon image...whether or not they decide to display it.
According to the W3C, the rel attribute's value should, "officially", be "icon". Interestingly, they also recommend putting a "profile" attribute in the <head> tag, "to define what the ["icon"] value means". Their version:
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
Though I don't know for sure how well this will make IE6 behave...if such a thing is indeed possible.
No comments:
Post a Comment