How To Install Favicon On Your Website

What is favicon and where is it located?

Well, You must have come across little tiny image on some companies' websites - the image located at the top left corner of your browser. These tiny images are called favicon. The favicon is the favorite icon, used in your browser favorites and bookmarks.

A favicon is also known as website icon, bookmark icon, or shortcut icon.

According to wilipedia: "A favicon is also known as website icon, bookmark icon, or shortcut icon." Mainly it is web designer's task to create and install a favicon.

Why are they important?

Short and sweet answer is "Branding". Just like a logo brands a company's identity, the favicon "brands" website's identity. It creates unique impression on visitor's and member's mind. It is very important to personalize your site's bookmark in your visitors' Favorites menu.

So, now you got what a favicon is, and how important it is to create website's unique branding and identity.

Now let us see the technical part:

What should be the favicon size?

There are many discussions on this matter. But, most of the professional web designers have agreed to the size of 16x16 pixels.

What is .ico format and why it is used for favicon?

The .ico file format is repository of bitmap image format. This repository is scanned for required image size or colour count at a particular location. At some locations, 16x16 size is desired while at some locations, 32x32 is required size. Even the required colour count is different at different places. The .ico format takes care of this issue. If correct file format is not used, the image may be compressed or expanded.

How to install favicon on your website pages?

Create a 16x16 image in your favourite image editing software like adobe photo shop. Save it to your computer. The image file format can be jpg or png. If you need transparency, stick with png format. Now, on dynamic drive favicon generator (google it!), upload your created image file there. You will now receive .ico file. Save it to your computer. Now, locate images folder in your website files hosted on server. Upload newly obtained .ico image file to this 'images' folder. Let us assume your file name is favicon.ico.

Now, to install this favicon, just put the 'link rel' code on all your website pages showing the path to your image file.

Here, the assumed file name is favicon.ico. You need to replace this if you are using some different file name.

That's it, your website pages are now showing up your favourite icon - favicon.

As a website owner it is important to know everything about favicon.