Monday, February 13, 2006

Favorite Icon

How to display the ChewChew web site logo on the address bar and in the favorites list?

As we want to make the new ChewChew web site standout in crowded favorites lists in browsers and address bars, this is how to display the logo next to links to their site.

First, I had to create a logo for their site; a very tiny logo to be specific.



ChewChewIco.gif

The size of the logo should be 16x16 pixels and it should be saved as a Windows icon file (ChewChewlco.ico for example). If your image editor doesn't support saving files in Windows icon format, you can use the following online tool.

 
 
  


Preview:
 FavIcon Preview  FavIcon Preview  FavIcon Preview  FavIcon Preview  FavIcon Preview

NEW! Animated Favicon (optional):
 FavIcon Preview  FavIcon Preview  FavIcon Preview  FavIcon Preview  FavIcon Preview
  Download FavIcon (0.37 KB)   Instantly test how this favicon looks in the browser

To add this favicon to their web page:

  • I clicked "Download FavIcon" and opened the package. favicon.ico is included in it.

     

  • Uploaded the favicon.ico file to the folder on their web site where I have the web page.

     

  • Added the following HTML tag to their web page after the <head> tag, before the </head> tag:


<link rel="shortcut icon" href="favicon.ico" >

That's it! To test our new favicon in Internet Explorer, add the ChewChew site to Favorites and reopen the page. To test it in Firefox or other Mozilla-based browser, simply open their web page and watch the address bar or the page tab. More information is available on the help page and the Favicon Validator page.



Courtesy - www.html-kit.com

No comments: