How do I get that cool little icon next to my URL?

Knowledge Base

Posted by Laurie Casolino

Those little icons are known as "favicons" and they are actually quite simple to do.

Launch your favorite graphics program, such as FireworksMX, and open up the graphic you will be using for your favicon. Resize the image to 16px x 16px. If possible, have your icon on a transparent background. Save the newly resized image.

You will need a program that can convert your graphic to a Windows Icon File, an .ico extension. I've found the simplest one to use is Irfanview. It's a free download from Irfanview's site.

  1. Open up your saved graphic in Irfanview, or similar program, and do a "Save As", choosing ICO - Windows Icon as the file type, and save it to your site's folder.
  2. In Dreamweaver MX, insert the following code into your <head>section:
    <LINK REL="SHORTCUT ICON" HREF="http://www.the_full_path_to_your_image.ico">
  3. Upload the page(s) and the graphic to your server.

You might have to clear your cookies and remove any bookmarks you have in place for this site before you can see your favicon. Also to note, favicons are not supported by all browsers, specifically older ones.