Browse by title articles:

Brand Your Website's URL With a Favicon

by Mario Sanchez    

Have you ever noticed that when you look at your browser favorites menu or the address bar, some entries have their own little icon beside their URL?

It's called a "Favicon" (a graphic file with a .ico extension) and it's placed in the root directory of the web site. Everytime you bookmark a site that has its own favicon.ico file, it is added to your browser, and it will be visible from then on in the favorites menu and in the address bar.

At the beginning, only large websites had a favicon, but now you too can create one and use it to brand your website. The first thing you have to do is to create your favicon. To be displayed by browsers, it must have a size of 16x16 pixels. To create one, you can use a graphics program called Icon Forge (you can download a free trial version in CNET):

http://download.com.com/3000-2195-10128559.html

You can either create an icon from scratch, or import a 16x16 '.gif' or '.jpg' file and save it as a '.ico' file.

You will then have to save your icon with the default name of 'favicon.ico', and upload it to the root directory of your website (where your index page is). Finally, after that, you must associate your icon to your web page. You do that by including the following HTML code immediately after the HEAD tag of your page:

link REL="SHORTCUT ICON" HREF="http://www.yourwebsite.com/favicon.ico"

Once you've done that, that's it. To try it out, go to your web page and add your page to your favorites. You should be able to see the favicon next to your bookmarked page title. Also, the next time you type your URL in the address bar, you will see your favicon to the left of the URL.

(Favicons work with Internet Explorer 5 or newer, and with recent versions of Netscape.)