How to create a favicon icon

Pictures speak louder than words. It is not only a graphical representation of the message you want to convey, it also creates a visual impact. You may not be able to remember everything you have heard in the movie, but you will remember the scenes that you have watched because human mind is very photographic and it stores pictures in the memory for long period of time. In fact many might still remember the design of their first birthday cake, their favorite movie scene, the worst accident they have ever seen, TV commercials and attractive logos.

Today, where modernization is increasing at tremendous speed, thousands of brands are coming up everyday, and with that the level of competition has gone sky-high. Companies are spending more capital on advertising than the actual cost of production, because they have to make a lasting impression on the minds of their consumers. And with thousands of brands around, how do these companies make their product look stand out of the rest? Logos and icons. Every company has their own market logo and icon that not only represents the fundamental policies of the companies, but they also appeal to their target audience.

Cyberspace is one such arena where these companies have jumped in and has turned it into a virtual marketing battlefield. More and more web sites have come up, al trying to lure the customers in the best way they can. So now that every other company has a web site, how do pioneering brands make their web site look different? Favicon is the answer to their question.

So what exactly is this favicon? Favicon is a tiny picture or an image that you normally see in the address bar of the browser you are using. These images are also called as favorite icons. Though, the concept of favicons is relatively old, the implementation of favicon began in late 2003 when World Wide Web came out with certain standardization policies.

Further let's explore on how exactly we can make these tiny favicons to impress visitors on our web site. These images are generally 16 X 16 pixels or 32 X 32 pixels, and most of the times web site owners hand over the job of creating favicon to professional web site designers, because they do not want to mess up and make their web site look messy. However, if you still want to give it a try yourself, you can do make an image for yourself too. You can look for free online softwares that allow you to make favicons and upload it to your web site, or you can do this on Windows Icon Editor software that is bundled with Windows.

If you already have an image file you can reduce it to 16 X 16 pixels, or you can create a new icon file. Since the drawing area is really small, you will need to be very careful to make sure your icon file doesn't look messy. Once you are done with the image, you will need to save the file, so you can select Save As option and save the file as "favicon.ico". Once the image file is saved as an ICO file, you will need to upload the file to your web site.

The simplest way is to upload the favicon.ico file to the root directory of your web site, this way you do not have to copy paste the icon file to every directory. Once you have uploaded the ico file, you can check by opening up any browser you are using and going to your web site
.
However, many a times your browser might not be able to locate the favicon.ico file. This happens usually when you have placed the file in other location and not in root directory. To help your visitor's browser locate your favicon file you will need to specify a tag in the head section of your webpage
.

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

You need to replace "/mail/images/favicon.ico" with the actual location of your favicon file, and that will take care of this issue. However, if you are still not able to get the desired results, it is recommended to let professional web designers handle this for you.

Posted by James on 2009-09-07 in the category " HTML "