Favicon – It’s About Time!
Posted by Jon Lee in Site stuff, Web Development, tags: branding, favicon, HTMLI’ve been putting off making a favicon because I haven’t found anything I liked that could be fit into a 16×16 icon. So this weekend, I finally spent a little time to create a favicon for my site.
What is a favicon?
A favicon (short for “favorites icon”) is the little image that shows up beside your URL in the address bar, beside your site title in opened tabs and beside bookmarks of your page. Favicons are displayed in almost all browsers (Firefox, IE7, Safari and more).
In my opinion, a favicon is one of the most important things you can do to brand your site and make it memorable. Ideally, it is something that should be done before even launching the site so I’m kind of ashamed it took me over 3 months to get it up. Since the release of Internet Explorer 7, this icon is even more important since this means almost all users will have the capability of seeing it!
How do I make one?
It is essentially a 16×16 icon (.ico) file. Creating one yourself isn’t hard, but can be difficult if you don’t have the right programs. Luckily there are plenty of free favicon generators out there. All you have to do is to upload an appropiate image for them to resize! (I used DynamicDrive to make my favicon.)
Once you have the file, simply upload it to your website and add the following HTML tag to the <HEAD></HEAD> section of your page:
<link rel=”shortcut icon” href=”/favicon.ico” />
replacing /favicon.ico with the path to your own icon of course. A piece of cake!
More Options
Your favicon can also be animated! HTML-Kit offers animation and text-scrolling options. You’ll have to add an extra HTML tag to make it work. Here are some examples:
If you can’t come up with a good favicon of your own, Favicon.co.uk has a gallery for some inspiration.
What do you think of my favicon? Anyone know what it is? (Aside from the fact that it’s a “J” for Jon Lee) 
Popularity: 3% [?]
Entries (RSS)
i think J is for Jack not Jon
thanks for the html-kit link,
i just found it from you
oh it looks absolutely great … thanx for sharing the how to do it!! ill be thinking about one for myself too!! thanx!!!!!!!
I’ve been trying to figure out what this is, besides a J — even copied it into PhotoShop to enlarge and sharpen and whatnot, trying to figure it out. Alll I can come up with is… an upside-down jester’s hat? A new moon with attendant improbable stars? A reverse, slightly amended, of your subscribe button graphic? C’mon – tell what you were up to here!
Oh, and I do think that favicons make a great difference to how professional a site will appear, not to mention making it easier to pick out of a list of bookmarks. You explained it well.
Hehe, it’s not an upside down jester’s hat, check out last week’s posts for a clue!
Gah. Ruby on Rails… Why didn’t I get that immediately?
At least, rummaging around in your previous posts had the added bonus of making me stop and pay attention to your showoff-ranking thingummie. Very cool, Jon.
[...] and do not sell these nor claim them as your own! Some of these small 16×16 icons would make a great favicon! If you like this post, you can subscribe to my full RSS feed. Tags: free, icons, web [...]
It looks great – nice and original
I’ve been putting it off too for about 2 months… I really need to do one!
Thanks for the very informative post.
While I was well aware of favicons and have used them before, the possibility of animated icons was news to me. So thank you for my web-design epiphany of the day.
Great site you have here. Keep up the good work.
I thought it was some kind of sock or something when I loaded up your site today.
An elf’s boot.
It DOES look like an elf’s boot!!
haha.. vever thought about it
)
Nice job. That’s a good bit of information to have. Fav icons are nice ways to dress up the otherwise boring list of bookmarks.