What the heck is a “favicon”, huh?

May 10, 2007 at 6:15 pm (Cool Tech, Internet tech, Rent Me)

Why do I need one? How do I get one? Okay, Uncle Dave gonna tell you. Pull up a bean-bag chair, plunk your butt, and hearken to the experience, if not the wisdom.

WP LogoA “favicon” is that funny little teeny picture in the address bar of your browser, right next to where it shows the web page address (or URL). In the case of this web page, for example, it’s a white capital “W” on a circular black background, identifying this page as a WordPress page. And Google has a blue capital “G” in a white square.

Now that we have defined what it is, why do I need one?

If you are creating a web site, and you want to “brand” your web site with your company or personal logo, then a favicon is another cool way of doing that. It helps to identify your web page if people are surfing with a tabbed browser like Firefox or version 7 of Internet Explorer. Besides, it’s just plain cool. Okay, it’s cool if you’re a total nerd like me.

How do you get one? It’s easy! You can make one, with software you can find in your mommy’s kitchen computer. Here’s how I do it:

  1. My logoFirst, get or create an image file (JPEG, PNG, BMP, GIF) of the logo you want to have for a favicon on your site. Like this one, to the right.
  2. Next, use a program like Irfanview or Gimp to bump up the color saturation and contrast just a bit, using your calibrated eyeball. Colors in a smaller image are better perceived (at least by me and my CE) when they are made a bit more bold. (With this example, there are no colors, and the contrast can’t be increased, obviously. Your results may vary.)
  3. Still in Irfanview (or Gimp), resample your image along its major axis to 16 pixels. 16 pixels is the magic number for favicons. Your goal is to have a finished image that measures 16 x 16 pixels.
  4. Save the resampled image as “favicon.bmp”.
  5. Open “favicon.bmp” in MS Paint or Gimp, zoom in, and fiddle it about, pixel by pixel, until it looks like it will convey the sense of the original logo when seen at actual 16 x 16 size in the browser.You may have to zoom in & out a few times, squint your eyes, and take several passes at it until you get a good finished result. Hey, nothing good comes easy. This is also a good time to resize the image to make it 16 x 16 pixels square.
  6. When you’re happy with the looks of it, save the image and exit Paint. Rename the file “favicon.bmp” to “favicon.ico”.
  7. Bravo! You now have a finished favicon file, ready for the unthinking abuse of the web surfing masses. It gets placed in the root directory of the web site, i.e. http://www.mywebsite.com/favicon.ico

It took longer to write the how-to than it did to create the favicon. Certainly you can try other programs. I just wrote about what I know and use, and because the programs I use are free. (Those of you who know me in meatspace know that I am frugal, or “cheap” as I have also been called.)

UPDATE – 5/25/07:

I created a YouTube video to illustrate the process. Here it is, in all its amateurish glory:

I am ZIM!However, if you want a favicon or even a logo, and can’t be bothered with all this folderol, you can hire me. I’m quick and easy, as well as being cheap. Good qualities in a creative consultant, maybe not so much in a date, but c’est la vie.


1 Comment

  1. lordhelpus said,

    Anybody “get” the DL icon? Anyone? Bueller?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: