In some sites and blogs, youâ€™d see an icon displayed before the website address in the URL field instead of the Internet Explorer icon or the globe icon in Firefox.
This is the favicon or the favorites icon. The icon is also displayed before the websiteâ€™s name in your favorites list.
If you want to create your own favicon, follow these steps:
1.) Create a square image that will serve as your icon using your favorite graphics editor. I suggest you use an 80 pixels by 80 pixels canvass so that you can also use the image as your gravatar or globally recognized avatar.
2.) Go to www.chami.com/html-kit/services/favicon/ and use their online favicon generator. Download your favicon â€“ the favico.ico file generated by the website.
3.) Upload your favicon into the root directory of your site. In the header of your page or blog, put this code (between the <head> </head> part):
<link rel="shortcut icon" href="http://youraddress/favicon.ico">
After doing these steps, your favicon should now be displayed in the URL field and the bookmarks. If you canâ€™t see it, try reloading your page a few times or empty your browser cache. If itâ€™s still not displayed, review your link=rel path to make sure it is actually pointing to the favico.ico file you uploaded.
For those using Blogger and other free-blog hosting services â€“ if you can edit your index page, you can use a favicon. Your problem will be on where to store your favicon since Blogger and most free image hosting sites do not accept .ico files. You can store your icon in a free account in www.ripway.com â€“ the only site I know of that accepts .ico files.
You can also use your original icon file (the 80px by 80px image) as a gravatar by signing up for an account at www.gravatar.com. The website owner personally reviews and rates the icons so approval may take a few days. With a gravatar, your icon will be displayed beside your comments in gravatar-enabled websites.