I’ve often wondered how people get those cute little icons next to their URLs in the Mozilla address box. Now I know. All you need to do is create a little 16×16 icon, transform it into .ico format, and add one line to the head of your HTML files.
Here’s the dance/remix version:
1. Use your favorite imaging program, like FireWorks or PhotoShop, to create a 16 pixel by 16 pixel icon with a white background.
2. Save as a JPEG.
3. Go to this handy website to convert your .jpg file into a .ico file.
4. Put the resulting favicon.ico into the same directory as the HTML file for which you want a favicon.
5. Add the line
link rel="shortcut icon" xhref="favicon.ico" mce_href="favicon.ico" >
to your HTML file.
You will only see the icon in the URL box if you’re using Netscape or other Mozilla-based browser. For Internet Explorer, it shows up in bookmark lists.
I learned about this through the Wise-Women discussion list, a useful resource for women (and men too) in web development.
UPDATE 12/12: Here’s a way to make a .ico formatted favicon file with PhotoShop, also via Wise-Women.
