Create And Publish A Favicon

A favicon is a 'Favorites Icon' that previous to IE7 would only display if the website was saved as a 'Favorite'.

IE7+ browsers also display the favicon in the address bar and on the tab. Some browsers will display any file type, but IE will only display .ico files. The .ico file format will be read correctly by all browsers that can display favicons.

Creating A Favicon Image

The first step in creating a favicon is to create the original image. You can use any graphics program for this - I used Photoshop, but Paint will work just as well.

1. Create a new 100x100 pixel file.
2. Create your icon image - keep it very simple as when it reduces to the standard 16x16 pixel size, any detail will be lost.
3. Clean up pixel edges - that nice blurring that gives you a smooth edge isn't going to show on a 16x16 favicon.
4. Save the file.
5. Now resize to 16x16 pixels and check the clarity of your image. If it does not display well, return to your 100x100 file size and make the necessary adjustments.
6. Save the file as a gif. I prefer gifs to jpegs for favicons as I find they give a crisper and smoother edge. At this stage you can name it whatever you like.

Create The Favicon File

1. Go to an online Favicon Generator site. Such as
2. Upload your image file – Generate Favicon image in .ico format
3. DOWNLOAD you favicon. Save it to the root folder on your hard drive that your website files are located as 'favicon.ico'
4. Upload to your website.

Displaying Your Favicon

IE7 is supposedly meant to automatically display any favicon.ico file found in the root directory. However, if you wish to ensure that all versions of all browsers display your favicon, add the following code to the head section of your pages:

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

In most cases, only the first line will be necessary, but to be on the safe side - add both lines.

Getting Your Site Bookmarked

To ask your viewers to bookmark your site, Add this code to your webpage:

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com/','Page Name')">Bookmark This Page</a>

Website Tools Index | Favicon | Code Protection | PHP Redirects | Google Analytics | CP SiteSaver