How to Create a FavIcon for Your Website

A favicon appears in your browser's location bar. For instance, the favicon for eHow is the letter O with a check mark that you see in the site logo. Many sites use these favicons to help identify and brand their site. Here I will review the steps to creating a favicon for your own website.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• A website
• A favicon image

1. You can create your own icon using an image of your choice. Many images don't scale down clearly and cleanly, so choose an image that is simple and clear and will reduce in size clearly.

2. Open the image in any photo editing tool you have. GIMP, Photoshop, Fireworks or Paint Show Pro will all do what you need (see Tips below if you don't have any of this software available).

3. Crop the image to contain only the material you want to appear in the favicon, then reduce the size to 16-by-16 pixels. The image resolution should be either 72 or 96 dpi.

4. Save the new image. You can save it as a JPEG, GIF or PNG. Upload the image to your website.

5. The Link in HTML 4.01

   The proper way to link to the icon depends on the version of HTML you are using in your website. For linking to the icon using HTML 4.01, insert the code shown in the image into the head of your document. Of course you must use your own information, such as the name of your image and server.

6. The Link in XHTML

   If your webpage uses XHTML 1.0, use code similar to what you see in this image. Again, customize the information to suit your particular server and image name.

7. The Shortcut Icon Method

   This option using the rel="shortcut icon" attribute for the link will work in XHTML. See the code in the image. The icon must be named "favicon.ico" and it the icon must be stored at the top level of the website (not in any subfolders) for this link to work.

8. You can use an absolute link to the image as shown in the HTML 4.01 example, or a relative link, as shown in the XHTML 1.0 example. Use your normal method of linking to image, relative or absolute, whether it's HTML 4.01 or XHTML.

9. Upload the page with the new code in the document head and reload your page to test to make sure that your new favicon appears in the browser's location bar.

Tips & Warnings

• A web-based tool at Dynamic Drive called the Favicon generator will help you create the image if you don't have the software to do it yourself.

• An Adobe AIR application will create icons for you. It must be downloaded and installed on your computer, but it's free. You would also need to download and install the Adobe AIR runtime, but it is also free.

Resources

• Favicon Generator
• AIR Icon Generator