Back in the days of IE 4 (yeah, 4, so 1997), Microsoft hit upon a great idea. If you made a teeny picture and saved the file as favicon.ico in your html root, their browser would pick it up and be the icon on your bookmarks menu. It didn’t take long for people to figure out microsoft.com was doing this, and they began implementing it all over for every site they could. As people got smarter, they figured out how to fake it, so you could have a different favicon for every page, just by manipulating the head of your html document.
Back in the day, you had to use .ico (Microsoft Icon) files as your favicon, but these days most modern browsers pick up .png, .gif and .jpg happily enough. This allows people to make animated favicons, which need to be shot and killed. For maximum compatibility, though, most people still use .ico, since IE doesn’t like the others. Or it didn’t. Someone on IE 8 will have to check.
The real problem boils down to size, for most people. At 16x16px, you don’t have a lot of room. This site actually has a non-recognizable icon (it’s the Xena/Gabby picture). Technically you can go up to 32×32 for an image, and I have one that’s 240×240, but in the end, they all render at 16×16 on 99.999% of browsers, so looking good at that size is your goal.
If you think I’m being silly, about a year ago, Google changed their favicon and admitted that it wasn’t final. Right away they basically started open submissions for a better one. When they changed it in January, it became the favicon heard ’round the world. Eventually, Google stepped up to explain the change. It’s important to have an icon that matches your site, as Google explains, as well as a unified look for all aspects of your design. Should you have a different look for each app on your site, or an all in one? How does it affect the other aspects of your site, like the iPhone’s new icons for saved webpages?
These aren’t simple answers, but to explain how I go about it, here are some favicons that I have made and use out there in the world. Not this site’s though. I need to come up with something better for it.
If, in the end, you’re stumped at making one, there are a lot of favicon collections out there to help you. Be warned, they can take a LONG time to load:
- favicoop, a favicon collection with over 43288 icons
- MpP’s Gallery, broken up into multiple pages
- Favourite Favicons, not as many, but easier to see
What are your favorite favicons?