Creating Favicons

ISSUE
For a while now I’ve wondered how to get a web navigation/web icon/toolbar icon to display on my website. Most major sites now have them:

Favicon Screen Shot

FIX
After googling things like “web navigation icon”, “web toolbar icon”, “browser website icon”, I finally came across what it’s really called, a “Favicon”. Read all about them at wikipedia.

I created a small image (32×32 px) using Flash. I then uploaded it to my websites (longlivethemonkey.com, Quotes, and Jeepers) and added the following code in the htmlhead.inc (inside the <head></head> of your xHTML) file:

<link rel="icon" type="image/png" href="images/lltm_icon.png" />

So now I get a pretty little icon at the top. When you read about the Favicons in wiki, it states that since Microsoft’s IE isn’t standards complient, if you name your icon differently than what Microsoft expects it to be, it won’t show up in IE >=7 (not sure about 8). The line of code above works in Firefox, Opera, and Safari. I guess Chrome hasn’t caught up with it yet.

UPDATE 1
I figured out how to make it so IE gets it. The file needs to be a .ico file and it must go before your code for your other icon. The code is:

<link rel="shortcut icon" href="/images/lltm_icon.ico" type="image/vnd.microsoft.icon">

You can convert your PNG to a ICO here. No software necessary.

UPDATE 2
With WordPress it’s easy. In your Dashboard under Appearance go to Editor. Click on your Header file (should be header.php). Put the code as you would in a regular file, in the head. Works like a charm.