Adding a favicon to your site:

FAVICONS

Notice the red “Y!” symbol that appears in the left-most area of the address bar in Internet Explorer screenshot below. This is Yahoo’s favicon. These favicons (favorites icons), sometimes called “bookmark icons,” appear after adding a website with a favicon to the favorites menu in Internet Explorer and certain other browsers.

plugins to create favicons: http://www.telegraphics.com.au/sw/

ico generators: http://www.chami.com/html-kit/services/favicon/

Directions:

1. Create your graphic in Photoshop or Illustrator
2. When you are done designing, crop to 32x32 or 16x16 pixels
3. use unsharp mask to sharpen the image up (optional)
   
   
   
   
4. Using the ico plug-in listed above to save it for the web or save as a .png file (upload it to the server)
5. Add the following code to the head tag on your index.html page of your site:

Below are 2 ways to add a favicon to your site. One using a .png file the other is using a .ico file. For a .ico file you need to download the plugin from: http://www.telegraphics.com.au/sw/

To install on Windows:

1. Move the plugin into the "File Formats" folder inside your Photoshop Plugins folder:
   • On Windows, ICOFormat.8bi
   • On OS X/Classic, icoformat (CS2/Mac version is ICOFormat_cs2.plugin)
   • On 68K MacOS, icoformat(68K)
2. Quit and relaunch Photoshop, if it's already running.

To use the plugin

• Use Photoshop's Open command (File menu) to open .ICO files (which will now appear in the file browser)
• Use Photoshop's Save command to create .ICO files

-------------------------------------------------------------------------------------------------

Then follow these instructions:

1. http://www.w3.org/2005/10/howto-favicon

Add this to the head tag of your html page:

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

or...

2. Add this to the head tag of your html page:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

----------------------------------------------

Some examples of current favicons on the web:

More articles on creating favicons:

http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

----------------------------------------------------------------------------------------------------

Some favicons I made, started out like this:

Then resized to 32x32px: