WWW FAQs: How do I get my own favorites icon?


2004-08-25: to display a unique icon in the favorites or bookmark list of the web browser, next to the name of your website, you will need to create a favicon.ico file and place it in the top directory of your web space. This will cause the icon to appear in Internet Explorer in place of the default "favorite" icon.

To produce favicon.ico files, Windows users should consider producing a 16x16 image with their favorite graphics program; for more information, see what image formats should I use? Then use the free IrfanView utility to convert it to .ico format. Non-Windows users can try the free icon editor provided by favicon.co.uk; as of this writing this is a useful site that provides an easy way to make .ico files for free.

Linux users may also have success with a GIMP plug-in that provides support for loading and saving .ico files. There is also a ppmtowinicon utility included in the latest netpbm utilities collection; the following command will convert any image to the necessary size, then convert the result to a favicon.ico file:

anytopnm < myfile.gif | pnmscale -xysize 16 16 | ppmtowinicon > favicon.ico

Placing this file in the top directory of your web space will cause it to appear next to any favorites list entry for any page on your website in Microsoft Internet Explorer. To allow the icon to appear in Mozilla and other browsers, in addition to Internet Explorer, you must also add this element to the <HEAD> section of every page for which the icon should appear:

<LINK REL="SHORTCUT ICON" HREF="http://www.example.com/favicon.ico">

As of this writing, Mozilla displays your icon in the address bar but, surprisingly, not in the bookmark list. Internet Explorer does the reverse: the icon appears in the favorites list if your page is listed there, but not in the address bar. This is the normal behavior of these two programs and does not reflect a problem with your HTML.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!