What is a favicon?

A favicon (favourite icon) is a bitmap image file which when uploaded to your site will appear in a Window end-users favourite list, next to your home page's title, whenever your site is bookmarked.

How do I make one?

PC users

1. Create a 16 x 16 pixel image at 4 bits (16 colour). You might find it better to create your image at 64 x 64 pixels and then resize it to 16 x 16 when you're ready to save it.

2. Save it as a Windows icon file (.ico)

3. Copy it to the top level of your site.

4. Bookmark your homepage to see the icon appear in the Favourites window.

Mac users

There are 2 ways of doing this. This author has used the second but apparently the shorter first way works too.

1st technique

1. Create a 16 x 16 pixel image (it's best to use web safe colours). You might find it better to create your image at 64 x 64 pixels and then resize it to 16 x 16 when you're ready to save it.

2. Choose File>Save for web and export it to the top level of your site as a "GIF 128 Dithered". Name it "favicon.gif"

3. In Dreamweaver (or the Finder) change the extension from .gif to .ico

4. You can add this code to the head tag of your index page but I've had mixed results with it and I think its optional ... <link rel="Shortcut Icon" href = "favicon.ico" type="image/x-icon" />

5. You'll need to bookmark your homepage on a PC see the icon appear in the Favourites window.

2nd technique

You will need a copy of GraphicConvertor. Get it from www.download.com

1. Create a 16 x 16 pixel image (it's best to use web safe colours). You might find it better to create your image at 64 x 64 pixels and then resize it to 16 x 16 when you're ready to save it.

2. Save it as a 4 bit (16 colour) file. Photoshop users can convert to "Indexed colour" in the "Image>Mode" menu, Choose the Local (Adaptive) palette and enter 16 next to "Colours" then save the file as a BMP.

3. Open it into GraphicConvertor and in the "Picture" menu change the colour depth to 4-bit.

4. Save it as a Windows icon file (.ico)

5. Copy it to the top level of your site.

6. You can add this code to the head tag of your index page but I've had mixed results with it and I think its optional ... <link rel="Shortcut Icon" href = "favicon.ico" type="image/x-icon" />

7. You'll need to bookmark your homepage on a PC see the icon appear in the Favourites window.

 

Related downloads

None at present

Related ads