Making a Good Favicon

If ever there was a pet peeve of mine, missing or crappy favicons probably ranks pretty high (undoubtedly, higher than it should).

"A favicon (short for "favorites icon"), also known as a page icon, is an icon associated with a particular website or webpage. " ~ Wikipedia

Tied into my usual rants about personal branding, having a favicon is yet another way to establish your brand. The icons are used for bookmarks, appear in tabs making it easier to pick a site out in a sea of tabs, appear in the address bar, and are often snatched for use on other sites in blogrolls. Creating a favicon, even a basic one, is easy.

A little history of the ICO format

A common misconception is that an ICO is simply a bitmap image (BMP) with an ICO extension. Although, the ICO format stores the icons in a bitmap form, the format can actually store multiple bitmaps within it. Each bitmap can be a different size and of a different bit depth including support for alpha transparencies. Download my favicon and you'll notice that it looks really good as a desktop icon! (I have 16x16, 32x32 and 64x64 pixel versions in there.)

Making a favicon

Browsers these days support pretty much any image format such as GIF and PNG. I've even seen some sites use animated GIFs for favicons! So, you could easily export a file from your favourite design app and be done with it.

If you want to take your icons to the next level, I highly recommend you get your hands on a decent icon tool. There's a plugin for Photoshop that I have not personally used but that would probably do the trick.

I actually use Icon Craft. The interface isn't spectacular (it's downright awful!) but it works really well at setting up each of the formats that I want to embed in the file. The software itself is jam packed with features designed to make it easier to create favicons within the editor. I find the editor just too confusing to make heads or tails of it, though.

Instead, I use Fireworks to create a PNG of the appropriate size. I make sure everything looks pixel perfect, including any alpha transparency I might want to include. Then I import the PNG into Icon Craft which retains all the transparency information. I can resize down right from within Icon Craft but if the effect doesn't look good, I'll create the the smaller versions in Fireworks as well and then re-import it into Icon Craft.

Keep in mind that your icon should ideally be under 20k which isn't a problem if you only plan to store the 16x16 and maybe a 32x32 version in there. Some sites apparently have size restrictions on the size of favicons that they accept.

Adding favicon to a site

Adding a favicon to a site is really easy. Easiest of all is just to drop the favicon.ico file into the root of your site. You may have to clear your cache or restart your browser before you see an update. Alternatively, you can add the following HTML to the head of your page:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">

That's it!

Published February 01, 2007
Categorized as Design
Short URL: http://snook.ca/s/763

Conversation

74 Comments · RSS feed
dericknwq said on February 01, 2007

I'm not picking at all but this is really funny when I read it.

"I can resize down right from within Icon Craft but if the effect doesn't look good, I'll create the the smaller versions in Firefox as well and then re-import it into Icon Craft."

Firefox? Fireworks? :p

Anthony said on February 01, 2007

png2ico is a nice alternative, although it does not have a GUI. I have used it with success several times.

png2ico takes the input files and stores them in the output file as a Windows icon resource.

Usage:
png2ico favicon.ico logo16x16.png logo32x32.png logo64x64.png

Anthony said on February 01, 2007

Oops, forgot the png2ico url.

Dave Bowker said on February 02, 2007

Nice post. I have to say it's also one of my pet peeves. I like to put all my frequently visited sites in my bookmarks toolbar on firefox, and those sites who don't have icons take up to 4-5 times the amount of space what with the description text as well. Having a favicon just means that your site and brading become one and you instantly place them both together, removing the need for text.

PNG2ICO is a very good cmd line tool to use as well ^^

Assaf said on February 02, 2007

yay! now I can make my AutoHotkey generated exe files' .ico look good on both the desktop and the task bar

@dericknwg: actually it makes sense, firefox shows the favicon/image you load in it in the address bar, and then you can print screen and save it.

Johan said on February 02, 2007

you can also do use semi-transparent pngs (png-8)

Eg. <link rel="icon" href="/i/favicon.png" type="image/png" />
I am working on this site, and I only did the homepage yet but the favicon is there too in place allready.

Aaron Bassett said on February 02, 2007

I'm in the same camp as you when it comes to sites missing favicons. I find my quick links bar looks a bit dull without them ;)

Thats why I did a bit of searching and came across this great extension for firefox: https://addons.mozilla.org/firefox/3176/

As a bonus I can also add favicons to all the bookmarklets I've written :)

Jonathan Snook said on February 02, 2007

@dericknwq: Man, I do that ALL the time, saying Firefox instead of Fireworks. :)

@Anthony: thanks for the link to png2ico. That's much better than paying for Icon Craft! It's now officially added to the repertoire. :)

Jonathan E said on February 02, 2007

Back in my PC days, the best program I came across for making icons was IconLover by a company called Aha-Soft. It's a little on the pricey side (comparatively... $50 USD) but it's a great program and really powerful.

I have yet to come across anything quite as nice for the Mac, but I'm sure it's out there somewhere.

Jonathan E said on February 02, 2007

One more thing... it's amazing how similar the sites for IconLover and Icon Craft are...

Kevin said on February 02, 2007

I've used this site before to make my favicons. Just uploead your file and click a button. I'm no expert but it does the trick for me.

Jonathan Snook said on February 02, 2007

@Jonathan E: they're similar because it's the same company...or at least the same address. Either way, I don't think the similarities are coincidental.

Michael Montgomery said on February 02, 2007

Thanks for the article, especially the reminder about multiple sizes.

So far, I've also just used the FavIcon from Pics service.

Jonathan E said on February 02, 2007

Yeah, as soon as I saw the sites I just assumed they were the same company. I didn't really dig any further though.

I'd imagine the code base for each program is very similar too.

luddep said on February 02, 2007

I just save my icon as favicon.gif and rename it to favicon.ico - works great.

Ivan Minic said on February 02, 2007

Nice article, but even nicer blog design! so fresh...

Danny said on February 02, 2007

About refreshing the cache to clear out the favicons - it doesn't work in Safari, which is really annoying. Apple should really sort that.

I found this though - http://www.interactiverichard.co.uk/journal/clear-out-favicons-in-safari/

Explains how to do it since apple didnt build in the functionality

Johan said on February 02, 2007

Here some good apps normally used to create pixel art but could be used to create those small pixel icons:

Graphics Gale
"Grafx2

Tim McCormack said on February 02, 2007

This is a nice guide for creating a properly formatted favicon, but I was hoping for an article on creating a good favicon. (What are the unique design principles to be considered in this particular niche of graphics?)

Adam H said on February 02, 2007

The plugin for photoshop works but does a terrible job scaling down from 32x to 16x. It is much better to create each size by hand and put them together using another software tool.

I found this article from Microsoft very helpful. It outlines how to make icon for XP but can be used for favicons too. Their method allows you to create a detailed 32x icon and a less detailed 16x one so it always looks exactly how you like.

Jero said on February 02, 2007

Wrong MIME type there, buddy. For .ico files, use image/vnd.microsoft.icon.

http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon

Jonathan Snook said on February 02, 2007

@Jero: The HTML example including MIME type was taken from Wikipedia. I never use the HTML, instead just putting the icon in the root but thanks for the information.

caspat said on February 02, 2007

I really like this slick "Contribute your thoughts" box. Its just ace.

Tim said on February 02, 2007

Nice icon on your site - Funny I just made one this morning for my site after find this for inspiration:
http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/

http://bla.st/design/

Tim McCormack said on February 02, 2007

@Jonathan: There is a problem with just putting the icon at the siteroot. Pages viewed over https do not reliably get tagged with a favicon, and if an entire site is secured, the favicon may never appear without this sort of prompting.

Einstein said on February 02, 2007

This does not work, or rather, you have no debug instructions for when this does not work.

Following the simple directions, I created a 16x16 favicon.ico using the Photoshop plugin, saved it to the html site root directory, and added the appropriate link code inside the head tag. If you view the source for the page http://anarchy-tv.com , you will see the link code there inside the head tag, AND if you copy the link URL pointing at the icon in this headeer file: http://root.anarcyh-tv.com/favicon.ico and open it, you will get a Save Dialog box and can save the .ico to your desktop, confirming it exists and is in the right place. But guess what, it neighther shows up in either IE or Firefox

George said on February 02, 2007

What a great write up. Nice article,

derek said on February 02, 2007

your favicon looks real bad i would post dumb shit like this

Rise said on February 02, 2007

Thanks. Today only I was thinking of creating an icon for my blog. Your post made it easy for me.

championchap said on February 03, 2007

Daaamn, this site is pretty!
Excelent colours, and the contribute your thoughts box has me impressed! One problem though, it scrolls down too far and ends up below the footer of the page.

Anyway!
Nice article, though im ashamed to say im one of those without a favicon.. but ill get on that later just because of this.

بندر رفّه Bandar said on February 03, 2007

آآآآآسف ..
Man, i just needed to test this amazing AJAX Comments ..

Very slick !

روووووعة !

Kevin said on February 03, 2007

I also discovered another way to make favicon on linux without using png2ico. Results of my experimentations can be found in the followinf article: How to Convert a Png image to a Website Icon (favicon).

Leion said on February 03, 2007

This is a very cool tutorial. Thanks

Use it said on February 03, 2007

Favicons are supplemental, they're not 100% necessary and they're more for decoration not for performance. It can also eat up a lot of bandwidth.

AaronT said on February 03, 2007

Check out this blog entry from Scott Hanselman. He added resolutions for Vista icons with alpha transparency (big), and realized later that the 70k file was slamming his server bandwidth. Since most users' experience of icons is limited to th 16 pixel size, I'd recommend leaving out the big sizes...

Mohammad said on February 03, 2007

im in the same boat love favicons

AJ said on February 03, 2007

For the correct way to include Favicons in web pages, please refer to this page by W3C. I think it can be considered the most standards compliant?

http://www.w3.org/2005/10/howto-favicon

AJ said on February 03, 2007

And funnily enough, that article refers to the Wikipedia article!

Seems even the standards are being set by wikipedia ;) (j/k)

Justin Silverton said on February 03, 2007

My personal favorite is ifanview. It's a free graphic program that can be used to convert a regular image into icons in addition to a ton of other stuff

Nate Klaiber said on February 03, 2007

Geez, 40 comments for a favicon. Thats impressive. hehe. I have always just used the photoshop plugin for favicons, and it has worked well.

I really just wanted to post and say I like the slick new layout for comment listings. Very nice work Snook!

Mike said on February 04, 2007

I use a freeware app from Extraneous Software on OS X - Iconverter saves out in various formats and is easy to use.

Iconvertor

Dave said on February 05, 2007

personnally i use 2 softwares for my favicon...

PS filter (IconFactory) : Great plugins that let us set differents ico formats in one psd file.

Axialis WorkShop : To make my .ico (windows and Mac format). He's Vista new format ready (256pixels icon) too. Downside: Axialis doesn't resize well to smaller format when creating 32x32 / 16x16 / 24x24 when starting from a 128/256 pixels icon... It's a little bit 'blurry'.

Give thoses software a try... even on a 30days trial it's good :)

Elaine Nelson said on February 05, 2007

for the soooper-lazy (and cheap!), there's an online converter from the folks who make HTML-Kit.

it's not fancy, but it works.

I discovered when I started at my new job that the most consistent source of 404 errors in our logs was browsers looking for a favicon. That's what prompted me to make one, although my boss loves seeing the little star in the address bar. :)

Artemis said on February 05, 2007

Kevin beat me to it lol... the favicon creator at html-kit.com is the most painless and easiest to use.

The Firefox and Opera browsers will see a favicon without the use of the link rel code on your site. I've never had to use that code. I could speculate as to why IE doesn't, but well, that's another discussion lol

Kay Smoljak said on February 05, 2007

Good article. Seeing favicons in use that are just renamed bitmaps or renamed gifs is one of my pet peeves - because they don't have proper transparency or multiple sizes, they have a solid background that looks awful when viewed on a backround browser tab (one that's not the currently focussed tab). It's a small detail, but one that I always notice straight away.

So please people, don't rename your bitmaps, grab an icon editor and do it properly!

kevin said on February 06, 2007

snook - I didn't even realize you posted this when I wrote my "Favicon Negligence" post over at Juxtaviews today. Great minds think alike ;P

Keep up the great work,

Lloyd Budd said on February 07, 2007

@luddep "I just save my icon as favicon.gif and rename it to favicon.ico - works great."

No, thats why your favicon does not show up in IE7, because IE7 checks the description in the file.

Harry Casimir said on February 07, 2007

Thank Jon for the cool ideas.

Matthew Sanders said on February 08, 2007

Finally, someone speaks up about this. I can't begin to describe how much it aggravates me to see sites with generic favicons or none at all.

Thanks Jon!

David Reimer said on February 09, 2007

I'm in well late on this one, but for PC types (as it were), this freebie icon editor works a treat:

Liquid Icon

ozel ders said on February 12, 2007

Green is beatiful.
Thank you very much.

Devon Young said on February 12, 2007

I had no idea that ICO's could store multiple images within them! That's awesome! I'm making some time this week to improve my favicon.

Taty said on February 14, 2007

Hey Jon, I´m using Firefox 2.0 with the Bookmarks Toolbar, added your blog to it, but it´s not showing any icon, don´t know why. Good article anyway!!

Cd-MaN said on February 18, 2007

Inspired by your post I added a favicon to my blogger blog :-). One thing I noticed is the fact that the code supplied by you is not XHTML compatible (because of the missing slash at the end) and blogger requires it to be so. You can find more details and links to free sources of icons in my blog posting.

name said on February 20, 2007

Good article.

Sheri Bigelow said on February 20, 2007

Amen! Missing favicons are a pet peeve of mine too— being the excessive tab junkie that I am. Thanks for a great article on the topic. The comments were also very helpful.

20syl said on February 20, 2007

salut :)

20syl said on February 20, 2007

Oups! it was for a test! You can delete this!

Leroy said on February 22, 2007

Sorry for that:( but my kids need to eat.

testing said on March 01, 2007

Favicons are becoming a must have, and I have them ;)

Casondra said on March 02, 2007

I use Adsen FavIcon to convert my files to .ico. It works pretty good. It automaticaly converts your favicon to a 16x16 file, at 24 bit color. It can also make your images into 32x32 program icons.

Unfortunately, I am having some problems viewing my own favicons on my computer. I think it is either an IE bug, or I have to clean my cache maybe. Do you know if you can preview a favicon from an offline site you are building, or does the site have to be uploaded on a server first? (I was going to try uploading to Yahoo Geocities as a quick test, since my domain has not cleared registration yet, but I don't think Geocities allows favicons).

I have tried some of the free sites that convert any image to a favicon, but if you start with a large image, they don't always resize well. (Especially if your image is not square). They also generally keep the same number of colors your image had originally, and if this is over 24-bit (256 colors), then your favicon probably won't work as far as I know.

Oh, and spiffy blog! =)

Pat said on March 08, 2007

Excellent job!

Tim Archer said on April 08, 2007

I recently went through creating a favicon for my site and didnt have the appropriate software to create the ICO file. I used paint shop pro to create a PNG version, and was surprised to find it coudlnt write out the ICO format. I did a little writeup on a simple web based service that will convert a PNG to an ICO file for you. Its located at:
http://timarcher.com/?q=node/25

Artem said on August 03, 2007

Everythere I was looking for this plugin for photoshop to create favicon for my site. Not I got it. Thank you for this.

Artem said on August 03, 2007

Everythere I was looking for this plugin for photoshop to create favicon for my site. Now I got it. Thank you for this.

Zadar said on August 08, 2007

Finally some really good info about favicons and how to make them. Thnx

download movies said on October 01, 2007

very nice article thx for all

Amanda said on October 18, 2007

@Snook: IE is still sticky with favicons. If I view your site with IE7 I get the IE icon. I'm guessing that since you're just putting the favicon in your root folder, and not using the html directive, your in violation of your own pet peeve!

Per Jero's comment, you'll have to use type="image/vnd.microsoft.icon".

Jonathan Snook said on October 22, 2007

@Amanda that's surprising. I launched IE7 and my little favicon popped into place.

Anonymous said on October 08, 2008

Thanks Jonathan.

After reading your very helpful information, together with some useful comments from other users, I used John Dunning's Fireworks extension to add a favicon to our site and will do so for clients' sites too.

I like your "Contribute your thoughts" box too. Fab!

mediocre said on January 12, 2009

Ey thank you very much, great tutorial!!!
I used to use a free program called Greenfish Icon Editor Pro to make mi favicons, it's very easy to make icons with more than one image inside.

And there is also a web site for searching other webs favicons, the link is getfavicon.org When i look for your site favicon I can see it has a big resolution, nice!!!!

I agree with the last comment, your "Contribute your thoughts" box is awesome!! Did you make it yourself????

Jonathan Snook said on January 12, 2009

@mediocre: Yes, I made it myself. :)

Jafit said on January 16, 2009

Excuse me. Do not envy a sinner; you don't know what disaster awaits him.
I am from Canada and bad know English, give please true I wrote the following sentence: "Overdoing the first kiss can make people uncomfortable, as can an underwhelming smooch."

THX :-), Jafit.

Lening berekenen said on January 21, 2009

That Icon craft software is real handy. It's easy-to-use and it can make some smooth icons. Never heard of the software before but certainly one of my favourites. Thanks

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.