How to make a Favicon tutorial

Ever wonder what those little icons next to the web address in the address bar are called? They are called Favicons and they are very easy to make. Now I am not a computer programmer or web designer who speaks in code, but I spend a fair amount of time digging through code and online tutorials to figure out how to do what I am after. Once I figure it out, I will try to make it easier for someone else. Now that you know the trick, you could change out your favicon depending on your mood, new logo, or even the season! Have fun!  {original tutorial found here. This was a Typepad tutorial, but process should hopefully work for anyone.} 

Step One: Design 16x16 pxl desired favicon art

Step Two: Save art as a .gif file

Step Three: Upload art to third party software site to produce an .ico file

Step Four: Upload .ico file in your website's HOME folder

{Troubleshooting info from Photoshop Support.} I had to do the Safari for the Mac part. Then my favicon worked.

Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. Or try this trick: go up to the address bar, click on the existing (usually the IE default) favicon, then "jiggle" it a bit and let go. That will reload the page and should get the new favicon to show up. 

Safari for the MAC will not display an updated favicon until the browser cache has been cleared. But choosing ‘empty cache’ from the menu won't help because Safari stores favicons in a separate cache. Go to Edit > Reset Safari, and check “Remove all website icons”. If you can’t find that, you must empty the icon cache yourself. Look for it in User>Library>Safari>Icons. On the Windows version of Safari, find C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari\WebpageIcons.db. Quit Safari, delete the file, restart Safari. (Sometimes you need to restart the computer too.)

On FireFox, clear the cache and restart the browser. On Opera, just refresh.

Windows can actually be the most beligerent about not updating favicons for Internet shortcuts (on your desktop, for instance). This tip from www.vistax64.com/tutorials: 

1. Right-click on the Desktop.
2. Select Personalize and select Display Settings (or simply Settings on XP).
3. Change the Color from 32 bit to 16 bit and click Apply.
4. Change the Color back to 32 bit and click Apply. 

File Format Not Available: The Windows Icon (ICO) file format will not be available until you have downloaded and installed the plugin, and then Quit and Restarted Photoshop.

Troubleshooting Update
One person who had trouble with Internet Explorer 7 has sent us a little tip:
I had some trouble with IE 7 — but the addition of these 2 lines of code solved the problem:
<link rel="shortcut icon" href="favicon.ico"> 
<link rel="icon" type="image/ico" href="favicon.ico">
 I found the info here:
www.webmasterworld.com/html/3251565.htm