How to Create a favicon.ico

How to Create a favicon.ico
What is a favicon.ico?

When someone bookmarks a webpage, the webmaster can specify a custom icon graphic to show beside the bookmark.

The icon is a file named "favicon.ico" and is located in the homepage directory of the website being bookmarked.

If there is no favicon.ico, then the browser displays a default icon. For example, in the following bookmarks menu, the default icon is shown beside the BigGeneralStore.com bookmark and a custom icon is shown beside the bime.com bookmark.
How do I create the graphic?

First, you need to create a graphic. You can use any graphics program to do that. The graphic must be square and can be of any size (e.g.: 200 pixels by 200 pixels). Keep in mind that you cannot put much detail into the graphic since it will be shrunk down to 16 pixels by 16 pixels when displayed on the bookmarks menu. When creating the graphic, I like to use 200x200 since it's easier to work with a larger image.

Once you've created the graphic, save it to disk using your graphic program's default file format so that you can edit it later if you want. Then also save it as one of these formats: .gif, .jpg, .png, .ico or .bmp

Tip: The background color of the Bookmarks menu is HTML RGB color #E0DFE3 so you may want to use that as the background color of your graphic. That way the icon will blend in with the Bookmarks menu.
How do I convert the graphic to a favicon.ico file?

Fill in the following form. Click "Browse..." and select your graphic file (only supports .gif, .jpg, .png, .ico or .bmp).

Select Image:

When you click "Generate favicon.ico", a new window will popup. On that window, right-click on the "Download FavIcon" button and select "Save Target As...". When it is saved to your computer, click "Open Folder".
What do I do with the .zip file?

Now that you downloaded the .zip file (named favicon_DATE_NUMBER.zip), open it by double-clicking on it. Inside it, you will see a favicon.ico file. Copy/move the favicon.ico to the folder on your hard drive where the rest of your website files are located.

Run your FTP program and upload favicon.ico to the same directory on your server where your home page file is located.
How do I tell the web browser to use the favicon.ico?

Edit your webpages and add the following line anywhere after the <HEAD> and before the </HEAD> tags:

<link rel="shortcut icon" href="/favicon.ico" >

Tip: If you use an Server-Side-Include (SSI) in your <HEAD></HEAD>, then you will be able to quickly add this statement to all your webpages by simply editing one include file. For example, on the AffiliateOcean.com website, all the pages have <HEAD></HEAD> and the head.txt file contains everything that we want to include into the <HEAD> section of all pages.
All done.

That's it. Your webpages now have a favicon.ico associated with them.

Add this page to your Favorites

Get Bookmarklets