Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Articles & Tutorials

How Favicons Work

by Mike Perrucci


Summary : A favicon is a tiny graphic that replaces the standard web page icon in your browser's Address bar. It also appears in the Favorites menu when your web site is bookmarked.

A favicon is a tiny graphic that replaces the standard web page icon in your browser's Address bar. It also appears in the Favorites menu when your web site is bookmarked.

A favicon needs to be 16 pixels wide and 16 pixels high, and saved with an .ico extension. The easiest way to implement one is to name it "favicon.ico" and upload it to the root directory that holds all of your HTML files. This is where your browser will automatically look for a favicon.

If you want to put the favicon in a different place, give it a different name, or use multiple favicons for multiple pages, you can tell a web page which favicon to use by inserting the following line of code between the tags of your HTML. Just change the link to the address you need:

<link rel="shortcut icon" href="http://www.website.com/images/myicon.ico">

There are several software programs and web sites available that allow you to create favicons. Favicon.co.uk has a free online editor and emails the finished icon to you. Another free tool comes from Chami.com's HTML Kit, which converts an image you've created with your own graphics program into a favicon.