Painted Pixels - How to Create a Favicon

How to Create a Favicon

favicon

A favicon is the little graphic you see in the address bar of your browser next to the url of the site you are visiting. If you bookmark the site, the favicon is saved too and is displayed by the link to the site in your bookmarks. This makes it easier to find that site again in your bookmarks.

bookmarks

This tutorial will work for any graphics program. I assume that you already know how your program works and can make simple graphic files.

What you need

ICO (Windows Icon) Format plugin - Install it into your plugins directory

What to do

Favicons are 16 px by 16 px images. Because of its tiny size it is better to design something simple as details tend to get lost at this size. However, this tiny size is very difficult to work with so we are going to start with something bigger and then re-size it before we save it.

1. Open a new file 32 px by 32 px on a transparent background.

2. Zoom in on it until it fits your screen.

3. Create your design. Here I have used PhotoShop shapes to create a simple heart design

4. Resize the image to 16 px by 16 px.

5. Save the file as favicon.ico. In the format box you must select Windows Icon (*.ICO). If this format is not available then you have not installed the plugin correctly. Please read your manual to find out how to install plugins for your graphics program.

options

7. Upload your favicon to your root directory.

8. In the head section of your page (i.e between the <head></head> section) add the following code:

9. Refresh your page and your favicon should show up in the address bar of your browser.

10. Browsers are notoriously stubborn at times when you want them to display a favicon for the first time. If your favicon does not show up, try clearing your cache, bookmark the page, close your browser, visit the site and press the F5 key to reload the page.

| Home |