This post originated from an RSS feed registered with Web Buzz by Douglas Clifton. Original Post: Favicon Tools Feed Title: blogZero Feed URL: http://loadaveragezero.com/app/s9y/index.php?/feeds/index.rss1 Feed Description: Web Development News, Culture and Opinion Latest Web Buzz Posts Latest Web Buzz Posts by Douglas Clifton Latest Posts From blogZero

I'm not a graphic designer, not by any stretch of the imagination. I can fire up Photoshop and do a few things. I also know enough CSS to be dangerous. But that's about it. By now, unless you are a first time visitor, you've probably come to the conculsion that I'm a bit of a nut when it comes to icons, especially those tiny little 16x16 pixel "favicons." I like them because they serve as mnemonic bullets, they remind me which tab is which because my browser usually has a dozen or more open at the same time, they sit up in your address bar next to the URL, and so on. I also have a wee bit of a petite fetish, hahahaha.

Every site in my review of developer resources has an associated icon. Often this is as simple as grabbing the one the owner has already designed. I don't see this as stealing since I am linking to their content, and it helps brand their presence on the Web. I've never had a complaint anyway. In some cases, I've had to be creative though (and when they turn out well I will usually send the results back to the owner of the site). So here are some tips I've learned along the way. Warning: I am not a Mac user (although I would dearly love to get my hands on one for a number of reasons), so some of these tips are specific to the Windows platform. I know, yuck, I know.

Like I said, I'm no designer, but my friend Jamey (of Mozilla/Firefox graphics and logos fame) is. To get you started, he has a nifty little tool that you can use to create favicons right from your browser. Also included are instructions on how to upload and install them on your site.

“I enjoy giving back what's been freely given to me.”
—Jamey ‘graphicsguru’ Boje

Since I just mentioned Firefox, here's a quick and dirty trick: If you're running version 1.5 or higher, just right click on any image on a Web page and select "View Image" to bring it up apart from other content. Notice how the browser automatically produces a condensed 16x16 version of the image in your address bar?

Which logically leads to my next tip: Screen capturing existing icons. 99% of the time this is how I acquire them. I've found it to be much more efficient than checking the source, downloading the image and, if necessary, converting it from .ico format to GIF or PNG. I have found GIF to be the best in terms of file size (if you use a lot of them like I do, the smaller the better—many of my icons are less than 100 bytes!), and across the board browser support for transparency. For drop-dead simple, the free and effective ScreenHunter from Wisdom Software does the job well. Of course, if you are lucky enough to find the icon you are looking for right on a Web page, all you have to do is drag and drop it into a folder or onto your desktop.

But you will still need to edit these small image files, and using Photoshop is like hitting a pushpin with a sledgehammer. I have to say, I looked and I looked and I tried and I tried and the only one that did anything for me is IconXP, from Aha Soft. It's got just what I need, without a whole lot of extras that will just get in the way. It's shareware so it's free to try and cheap to buy.

And finally, sometimes what you really need a little inspiration. And I can't think of a better source than the prolific work of Jakub Steiner and Tuomas Kuosmanen (of Gnome desktop fame).

“At 16x16, you're not limited. You're empowered.”
—Jakub ‘jimmac’ Steiner