How to Add Favicons?

Favicon (FAVorite ICON) is a multi-resolution image usually representing a company’s logo.

At ShrutiGupta.com, you will see my Favicon in the address bar just before the URL. The image will also show up next to the website title when you save the web page in the Favorites folder. Adding Favicon to a website not only makes it look professional but also, helps the branding of the company logo. Favicon has the potential to make a lasting impression on the visitors and hence it helps promote brand recognition.

The required size of Favicon is 16×16 pixels with either 16 colors or 256 colors and it is saved as Windows Icon (“.ico”) file format. Creating a Favicon is real simple. You need to create a small 16×16 pixel image in your favorite photo editor. Ideally, this image should represent your company’s logo. Since the size is really tiny, fitting the entire logo might not be wise. You want to make sure that it’s comprehendible and every aspect of the image is visible.

If you like, you can create a 16×16 pixel icon and a 32×32 pixel icon. Windows will display the former in the address bar and Favorites menu and the latter when the user opens up a folder that is set to display large icons.

You can save your icon as Windows Icon (“.ico”) file format using one of the following options:

* Download, install and follow instructions for Windows Icon file format Photoshop plugin donationware from http://www.telegraphics.com.au/sw/.
* Download, install and follow instructions for IconForge shareware from http://www.winsite.com/.

Once the image file is saved as Windows Icon (“.ico”) file format, all you need to do is upload it to the root folder (top level) of your web server.

Then when you visit the website, you should be able to see it in the address bar and also, when you save the web page in the Favorites folder. Although this works in Mozilla, in Internet Explorer you will need to refresh the cache for Favicon. For this, click the default icon in the address bar and move it to the right and then release it. You might need to do this couple of times. This refreshes the cache and you should be able to view the Favicon.

If you can’t view it in Mozilla, then chances are that your website hosting provider does not provide support for .ico files. Either you might want to request them to add support for Windows Icon file format or you might have to resort to adding Link tag in the Head section of every web page of your website as recommended by Micrsoft (http://msdn.microsoft.com/workshop/author/dhtml/howto/shortcuticon.asp).

If all the above steps of creating a Favicon sound too cumbersome, then just hire a professional to do this job for you. I highly recommend adding a Favicon to your company website. It is the important first step for promoting brand recognition of your company’s products or services.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.