Learn How to Create a Favicon Icon

Favicon an Introduction: -

It is a small icon displayed on the browser address bar (called URL bar), on the bookmark lists and, for certain browsers, on the navigation tabs.

A favicon plays a dual role for a website, one hand it attracts site visitors that contributes to increase site traffic and on the other hand it also gives an improved looks to the website. So we can say that favicon plays an important role for a website.

Ways to how to create a favicon?

What you have to do that you have to go with some simple steps of designing work. A favicon is a graphic whose size is 16 pixels X 16 pixels having no more than 16 colors.

To create a favicon for your website you can begin from two very effective software called Photoshop and ms-paint. If you are using ms-paint create your graphic of the favicon of the size mentioned above.

Now save it in any format like .bmp, .jpeg and so on. Your neat job is to use software or graphic program that can change your graphics into .ico format.

Here you save your graphic with the name favicon.ico. To change a graphic from .bmp or .jpg you can use many types of software that can be downloaded free from a website.

If you do not have any software that can change your graphic into an icon, in this case you can do the same by using ms-paint.

Only you have to do that make a favicon icon having size 16 X 16 pixels and save it by the name favicon and put the extention .ico at the end of name of your graphic. Now your favicon icon is ready.

The same kind of process you can apply with Photoshop to create your favicon icon, but using Photoshop is not easy for everybody.

So if you are feeling it difficult to use Photoshop, simply you can use ms-paint. Your favicon icon may be a graphic or an alphabet.

Now your turn is to upload your favicon icon on your browser, but make sure that the icon is in your root directory where your index.html file is present.

Otherwise your favicon icon will not appear on your website. After uploading the icon in the root directory you need to write following code to view the icon on you site.

Code: -

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

Before using the code be sure that the above code should appear within < head > tag.

At last to confirm your job performance you can open your site and check it that your favicon is working or not.