Icon envy?

If you have a weblog or web site, do you have icon envy? When your beloved cyber-creation loads in a web browser, does the address bar just show a bland generic icon next to your URL? Have you ever thought to yourself, “I’d be so much happier if I had an icon of my own?”

Until recently I answered “yes” to each of those questions. Now you likely can see (if you’ve got Firefox) that I’ve got my own HinesSight “H” favicon (favorites icon) proudly displayed. With a few fairly easy steps, you can have your own favicon just like me, CNN, and Google.

If an HTML-ignoramus such as myself can get a favicon up and showing, just about anyone can. The kind folks at Chami.com make it pretty easy. I just added a favicon to my Church of the Churchless weblog and I didn’t even need a triple latte to get me through the process.

Step 1. Come up with a image for an icon. All you need is a graphic of some sort that will be recognizable when it’s teeny-tiny. I took the easy way out and simply used the first letter of each of my weblogs: “H” and “C” Today I made a JPEG file of the Church of the Churchless “C” and saved it on my computer.

Step 2. Then, using the Chami.com tool, I browsed to that image and clicked on the “generate FavIcon.ico” button. Don’t worry if you have no idea what an “.ico” file format is. The tool takes care of that worry for you. If you’re like me, you don’t have a way of saving an image file in that format on your own, so Praise Chami.com.

Step 3. I now had a favicon.ico file that I downloaded to my desktop. I then uploaded that file to the folder on my weblog where files are kept. TypePad conveniently has a button that gives you the path to a file. I jotted down that path: http://hinessight.blogs.com/church_of_the_churchless/files/favicon.ico

Step 4. All I had to do now was plug a little bit of HTML code somewhere into my weblog. I chose the “Welcome” section, using Method 2 described on the Chami page. The code in between the angly things, < and > (see, I really am an HTML doofus) looked like this: link rel=”shortcut icon” href=”http://hinessight.blogs.com/church_of_the_churchless/files/favicon.ico”

And then came the big chills-up-the-spine moment (my life isn’t very exciting, so adding a favicon to my weblog is a pretty big deal, right up there with throwing caution to the winds and having two handfuls of Kettle Chips as a midnight snack inside of just one).

I clicked on the Church of the Churchless bookmark. And voila, there my “C” icon was. In Firefox, at least. I haven’t had any luck getting the favicon to show up in Internet Explorer 6, but that doesn’t break my heart. I hardly ever use IE anymore. Plus, my IE browser doesn’t even show a icon for CNN (or any other site, for that matter), piece of junk that it is.

You can validate your favicon work here. Somewhat strangely, I didn’t get a very positive validation. The validator said it couldn’t recognize the HTML code and apparently just found the old generic TypePad icon. Yet every time I check, I’m able to fondly gaze upon my personalized “H” and “C” in the address bar (and in the Firefox Bookmarks list).

Go figure. The ways of the Internet are passingly strange, and I’ve spent more than an hour on a sunny late afternoon trying to unravel the strangeness. All for a 16 x 16 bunch of pixels. (Looking upon them makes me happy though, so it’s been worth it).