Thingys & Doodads - FavIcon

I was over at Ambient Irony the other day, and noticed Pixy's little icon image to the left of the URL in the address bar and in the tabbed window in Mozilla. I've seen them around, but haven't really tried to find out how it was done. Anyway, I left a comment over at Pixy's and one of his fans left directions. The directions were of a general of enough nature, that I had to do a google search on "favicon".

One of the results was FavIcons From Pics at Chami.com. It offers a little program that takes your specified image, converts that image to the proper size, gives you a preview of the resuling favicon image, let's you download the image to your box, gives you the HTML code and complete instructions to implement the icon.

Below is the procedure I used to install an image of YellowDog for Madfish Willie's Cyber Saloon and some of the obstacles I encountered along the way.

To start off, I picked a different image than I have now to work with. I used the image in my comments window. I went through the process as outlined on the Chami.com site. After uploading the image, I didn't like the way it rendered on screen. I knew what the image was supposed to be and look like, but I didn't think anyone else would be able to tell what it was.

So, I took an image of YellowDog. I pulled it into an image editing program, cut out the background, cropped the image to show only her head, and saved the file. I uploaded it to the Chami.com site and ran it through the program.

After saving the favicon image file to my box, I had to figure out how to get it to the proper directory at mu blog. I took a pot shot and decided to use the file upload feature. I uploaded to the Local Site Path with the box field blank.

Next, copy the HTML code with the correct URL path into the head section of the Main Index Template. [SAVE] & [REBUILD] Indexes only.

Lastly, close the browser, re-open it, and there she is!

My recommendation is to use an image that is clear and simple. Since the resulting favicon image is 16px by 16px, the original image should start out as small as possible.

Posted by Madfish Willie at June 2, 2004 02:11 AM