How To: Create FavIcon For Your Website in Few Easy Steps

Are you wondering how did those website put up a small icon in front of their URL that you see in your browser and your bookmarks? What do they do anyway?

That small icon that you see in front of the URL in your browser is called a FavIcon [Favorite Icon]. When a visitor adds your site address or any page to his bookmarks or favorite menu, the entry is personalized by the favicon from your site. See the screen shots below.

Bookmark Menu – Screenshot

The icon is visible in not only in the bookmarks or favorite menu but also in front of the URL in the browser.

Notice the icon in front of the URL

How to create a FavIcon for your website

Let’s go through some simple steps to create your own FavIcon.

First, select an image of your choice or create an image in MS Paint or any other tool consisting only of text [as shows in my example below]. Remember, the image will be reduced to a size of 16×16, which is very small, so choose wisely.

Creating a simple text image using MS Paint

Now that we have the image ready, open the FavIcon Generator URL from Dynamic Drive and browse to the folder where you saved your image [or select an image], then click on ‘create icon’. The page will then give you a preview. At this step you may either proceed to download the image or select a different image.

After you have downloaded the icon to your system [save it as favicon.ico], it’s time to upload it to images folder on your website. Then add the following line to the < head> section of your [mostly the index] page.

<link rel=”SHORTCUT ICON” href=”images/favicon.ico” />

That’s it. You have successfully created the FavIcon for your website. If you find this article useful or in case of any feedback, please do drop in your comments.

» Recommended favicon generators and favicon gallery for your site:

• Dynamic Drive- FavIcon Generator
• HTMLKit – FavIcon from Pics
• Favicon Editor
• Favicon Generator and Gallery