13
How To Create A Favicon
Filed under: Uncategorized | Tags: Web | November 13th, 2003
I’m going to make a confession: I can’t stand favicons. To clarify, I love the idea and the little icons on my Mozilla tabs are nifty, but I hate having to make them. This is partially due to working within the constraints of 16 by 16 pixels, but more so that until now I haven’t found a good way to generate said icons on Windows. I was jealous as a whip (can a whip be jealous?) when Noel posted instructions detailing how to do it on a Mac. For aforementioned reasons they weren’t applicable to me, so I set out to find a clean way to do this on Windows without spending any moolah.
At this point someone is probably wondering what in the world a favicon is. As far as I know, it’s not a standard of any kind (and if it was it’d be a badly implemented one) but it’s a widely supported feature in modern browsers that allows a site to specify a small graphic or icon to go next to its address in the address bar and theoretically as the icon for the page when it is bookmarked as well. (Some examples of favicons.) I believe Internet Explorer was the first to implement this. Due to popular demand there is a new photomatt.net favicon (you may need to reload that link directly to see it). To see it in Internet Explorer, bookmark this site (which you should do anyway). In Mozilla and its progeny you should see it just fine automatically, and possibly in Safari though I don’t have that handy to test. To see it in IE for Mac you need to sacrifice an Intel CPU and do a favicon dance. Actually I’m not sure why IE5/Mac has trouble with some favicons, at some point in the past I tracked it down to MIME issues, but it’s not really worth the effort anymore.
Another good reason to have a favicon.ico in the root of your site is some browsers request that file whether it is linked in your HTML or not, so if there’s nothing there it fills up your error logs. Since I watch error logs pretty closely this has always been an annoyance for me.
So what’s the trick to creating lightweight multi-size favicons? I used to use the online java tool the folks at favicon.com offered, but now they seem more concerned with making money than providing free tools. More recently I’ve used Icon Forge which I can easily say is one of the most awful programs I have ever used in my life. Truly horrid. I wouldn’t recommend anyone do that, so here’s the process I came up with. (Any excuse to use a nested list.)
- Download png2ico, which is a small, free utility for Windows, Linux, et cetera that works quite well. Extract it to
c:/. - Create an image you’d like to use at a decent size (at least 32×32 pixels) in your favorite image editor. I like Photoshop so here’s what I did there:
- Ctrl + N to start a new document. Choose 32×32 pixels for the size. Cram whatever you want to use in there, I choose a comic Josh did of me a while ago.
- Do a Save for Web (Ctrl + Alt + Shift + S) and save it as a PNG with the filename
icon-32.pngto the same folder as the program you just downloaded (to keep things simple). If you want to keep the size down I would recommend taking it down to 16 colors. Don’t forget transparency if you need it. - Now go back and resize the image you’re working on to 16×16 pixels (Tools → Image Size [is there a shortcut for that?])
- Save this image as a PNG with the filename
icon-16.pngin the same directory as the above.
- Now it gets a little tricky, open up the command line. Try Start → Programs → Accessories → Command Prompt.
- Navigate to the folder where the png2ico.exe file is, if you followed the directions above you can use the command
cd \png2ico. - Now you just have to enter a command to roll those two PNG files you made into one nice ICO file. Here you go:
png2ico.exe favicon.ico --colors 16 icon-32.png icon-16.png. You may be able to use command line completion (pressing a letter or two and then tab) to fill some of that in for you. You could potentially embed 64×64 and 128×128 pixel sizes into the icon file by just specifying additional PNGs of that size, but for a web favicon that really isn’t needed. Just remember this if you ever want to make a nice application icon. For an applicatoin icon you’d probably want to use a PNG-24 with full alpha transparency, which this tool supports as well. - Now there should be an
favicon.icofile in that same folder which you should upload to the root of your site and then link to it with something like<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> - Have a drink.
Now I know that sounds like a tricky process, but it’s actually not as hard as it may read and of course if you have any problems leave a comment and I’ll try to help you. There is supposedly a graphical front-end for using png2ico but it was so badly designed it’s actually easier to use the command line, as unlikely as that seems.
Update: Ian has found my favicon twin. Where have you been all my life?
Update 2: Oskar van Rijswijk recommends IrfanView in the comments. You might want to give that a try too.
Thanks anyway!
Share your thoughts