No matter what you’ve read about free or open source tools to create favicons, it’s all wrong. Forget it. Ignore it. Listen to me.

Good, got that?

A little background: I wasted a good two or three hours this Saturday hunting down decent tools to convert transparent PNGs to favicons. Nothing would work. I tried png2ico (which I used back in 2002), icoutils, and xpm2wico (XPMs don’t support 8 bit alpha–just so you know), and the results were less than spectacular. icoutils tried to work, but I was left with one tiny image that contained tinier copies of itself vertically aligned, mangled, and contorted. It looked terrible, and I have no idea why I couldn’t get it to export even a single 16×16 icon that didn’t look like a Russian matryoshka doll.

I found the answer. The answer is to use IcoFX. It’s Windows only, but it works great under an XP virtual machine. Best of all it supports 8 bit transparency, and the output looks fantastic. I highly recommend this little app, and I suggested sending the author a donation if you use it.

I’m really disappointed about two things: 1) That IcoFX doesn’t show up under any search related to favicons (instead you get crummy online converters that don’t work) and 2) that you have to specifically search for icon editors. Seriously, people! Stop linking to horrible, awful, worthless online converters and start linking to IcoFX instead! Those online converters are absolute rubbish, and all of the F/OSS apps that generate ICOs don’t work well if you’re dealing with 8 bit transparency. IcoFX is the only app that works and works well. I can’t stress this enough, and because I wasted so much time chasing dead ends looking for favicon utilities, I hope I can save you some time. Don’t bother with anything but this tool. It’s free, it’s fast, and it just works.

Spread the word about this little app, not nonsense about tools that are almost 10 years old. Oh, and those online converters? Forget it.

No doubt you’ve seen many blogs and other sites that use rounded boxes with soft gradients and drop shadows. Creating one doesn’t have to be difficult, and you don’t even need to use the gradient tool to achieve an effect that looks very similar to this:

You’ll see (and hopefully try) the same technique I used on the background stencil images for my blog. Admittedly, this tutorial doesn’t create something exactly like the images I have, because I’ve aimed to show you how you can create text that appears water-stained or scratched and worn. The techniques are almost identical; however, you’ll want to avoid applying the scratched effect if you’re aiming for a water-stained appearance.