How to create a favicon

Kent Gilliam

What is a favicon?

Wikipedia says:

A favicon (short for 'favorites icon'), also known as a website icon, a page   icon or an urlicon, is an icon associated with a particular website or webpage.   A web designer can create such an icon, and many recent web browsers can then   make use of them. Browsers that support favicons may display them in the   browser's URL bar, next to the site's name in lists of bookmarks, and next to   the page's title in a tabbed document interface.

     Favicon   in NPCA web site.

Steps:

1) Create a favicon.

• Create a 16x16 or 32x32 pixel image that you want as your favicon.  GIF,   JPEG and PNG formats all work.
• Convert your image into .ico format. You can do this easily on http://www.html-kit.com/favicon/ or by adding this plugin to Photoshop.
• Save your new favicon to your computer.

2) Add your favicon to your Web site.

• Upload your new .ico file as a file (not as an   image) to both your root folder and your /images folder. If you do not   have an /images folder at the root of your website, create one first, and then   add the .ico image-file therein.

This should be enough to make the image show up for both Firefox and Internet   Explorer.

Trouble-Shooting:

• You may need to clear your Temporary Internet Files and History in IE before   the favicon shows up.
• If the icon is still not showing up, add this line of code in between the   HEAD tags in your wrapper:
  
       <link   rel="shortcut icon" href=http://www.mydomain.com/favicon.ico type="image/vnd.microsoft.icon" /> (replacing www.mydomain.com with the equivalent   for your web site).
• In IE6, you may need to bookmark the site before being able to see the   icon.

Example:

• National Parks Conservation Association - http://www.npca.com
• Michigan Humane Society - http://www.michiganhumane.org
• American Humane Association - http://www.americanhumane.org
• SD Humane - http://www.sdhumane.org