Home PHP Graphics ASP JavaScript HTML JAVA Swing Webtip Lyric Free sheet music Ringtones

What's a Favicon (favorite icon)

Favicon stands for Favoriteicon. It a special logo(.ico) or other small graphic image (JPG,GIF,PNG) associated with a web page. The favicon is usually showed in front of the web site address on your browser.

See the following Internet Explorer snap shot. They are Yahoo and Google's favicon respectively.

Why you need Favicon?

It is an very important step for promoting your web site, your products and services. Favicons are used to personalize or brand your web sites.

Some browsers also shows favicons on the Favorites menu, Bookmarks and on the Links bar. See the following Firefox snap shot:

Image processing -- Convert images into icons (.ico)

Favicon is a 16x16 pixels small image. Numerous software could convert any images to a icon.

Go to any search Engine and search for"Image icon converter", you will find bunch of them.

Here recommends a free software and online application for creating icons.

IrFanView (www.irfanview.com) is a free Windows platform (compatible to 95/98/ME/2000/NT/XP/2003) software to create icons. This software has basic image processing functions so you won't need other software to make changes on your image. It supports all kinds of image types (jpg, gif, psd, png, jpg200, psp, mov, ico, swf, clp...etc). Download here. zip

Favicon from pics from www.html-kit.com is a online icon converter. Load your picture in and download your icon. Very simple. You may try it here. Just Click on Browse load your image, then click on Generate FavIcon and you will be redirect to the downloading page.

Save your image file as favicon.ico and put it under your web site root directory and any directory you select.

Validate Favicon.ico icon

Type http://www.your-web-site.com/favicon.ico (assume you put favicon in your web site root). If your web site supports .ico file, you should be able to see your favicon.ico in your browser now.

If you have Mozilla firefox, launch it and open your web site. If you web host supports .ico files, you will see your favorite icon in front of your URL.

Show Favicon icon in the browsers

FireFox usually automatically picks up favicon.ico even if you put favicon.ico in your web site root. But, Internet explorer sometimes load favicon.ico and sometimes not if you didn't put <link> tag in your web page.

In order to optimize browser support, the following <link> tags should show up in <head> section of your HTML page.

You may also use URL in href: like href="http://www.website.com/favicon.ico" or a path (absolute path or relative path) to your favicon.ico file like href="images/favicon,ico" or href="/foo/images/favicon.ico"

Trouble Shooting

Trouble: I put favicon.ico in my web site root. But I could not see it Internet Explorer.

Answer: First validate your icon by using the above method. Then, You may close all your IE windows and reopen it. Refresh your web site several times. This is because IE cache your old web page. You may clear your cache by going to Tools->Internet options, click on "Delete files" button.

Trouble: What if I still have problem?

Answer: You may post your question in our support forum.

Learn how to create favicon.ico is free, but your time may not be free. You might want to seek professional help if you still think all the above cumbersome.

Webtips