Favicon - Customized Browser Icon for Your Web Site

Have you ever gone to a web site and seen a customize icon in the address bar?

Or perhaps going through your browser bookmarks you have noticed web site bookmarks with their own customized icons instead of the usual Internet Explorer "E".

By having a customized icon for your web site it makes it stand out especially when your site is bookmarked. Your site is bound to get a second glance each time someone goes through their bookmarks because it is distinctive:

You'll notice that most of the biggest sites online have a customized icon. For example hotmail.com, msnbc.com and others. If they are doing it there is probably a good reason for it.

How Its Done

These customized icons are very easy to do. They are called favicons (short for favorite icons).

They are simple 16 x 16 pixel graphics that are saved in a special spot on your web site. Whenever anyone with Internet Explorer 5+ comes across your site, the favicon is loaded automatically for them.

Step 1

The "hardest" part about the favicon is creating the graphic itself.

If you have any graphics program, you can do it. I use photoshop but anything such as paintshop or even Microsoft paint will do the trick.

Hint #1: Even though the icon needs to be 16x16 pixels (which is small), you don't have to draw it at that size. Trying to draw a 16x16 graphic that looks good is pretty challenging.

Instead create an image that is a size multiple of 16x16 for example an image of 64x64 or 128x128. You can then shrink it down to 16x16 later.

Personal Experience

If you look at the icon for this site, you will see this:

I used a screen capture of my website logo and then cropped out the world logo. This was then shrunk down to size and I also played around with the color to make it red.

I chose red because it really stands out. You can see this by bookmarking this site and then looking through the bookmarks. I bet you will have no trouble finding my icon!

Step 2

Now that you have drawn or captured an image that you would like to have as an icon, you need to save it. Make sure that the dimensions of it are in multiples of 16 as explained above!

Save the file as a .bmp file. This ensures that you don't lose any resolution so the icon stays nice and clear. At only 16x16 pixels you want it as clear as possible.

Simply go into the file menu of the graphics program you are using:

• Choose "Save As"
• Name it favicon (that's important!)
• Choose .bmp as the file type

Step 3

Resize and Converting It

Now you need to convert it to a file type called .ico (short for icon). Most paint programs can't save in this file type but there is a free program which can do it for you.

A handy little free file viewer called Irfan viewer will do the trick for you. You can download it here for free.

Once you have irfan installed and running, open up the favicon.bmp file that you created earlier.

You want to use this program to shrink down the file down to a 16x16 icon file. You can do this by pressing <ctrl> R or using the menu:

Choose 16x16 as the dimensions:

Now save it as "favicon" as the .ico filetype.

The Final Step

The last thing you need to do is upload the favicon.ico file to your web server.

It needs to go into the main directory of the site. This is the directory that has your index or default file for the main page of your site.

Once it is in place, Internet Explorer browsers will automatically have it loaded each and every time they visit your site.

Option #2

If all of the above seems a bit intimidating, you can actually build a relatively simple favicon yourself right online. Simply go to this webpage and draw an icon:

http://www.favicon.co.uk/

Once you are happy with a simple icon, you can then have the finished product emailed to you. You then upload it to your site.

Troubleshooting

When you have uploaded the favicon, you will need to refresh your browser cache before you can see it yourself. You can do this by pressing the F5 key. If it is still not showing up, trying closing your browser and opening up a new window.

Keep in mind that the favicon is for Internet Explorer browsers only. Since IE has finally captured a huge portion of the market, a majority of the visitors to your site will be exposed to your favicon.

It is pretty easy to implement this and can help your web site get some added attention from your visitors.

Related Articles

·  Buzz Marketing - How to Generate A Marketing Buzz To Increase Sales ·  Adding Audio To Your Web Site? ·  Resize Graphics Files Easily ·  How To Increase Sales