Every Site should have a Favicon

Imagine summing up everything a website is about in a 16x16px square. That’s the goal of a favicon (short for favorites icon). Pretty much every site out there has one, and it’s a devil of a task to make one that looks appropriate, identifiable and understandable in such a small space. As much time as I spend tweaking a design I spend on a favicon because they are that important for the look and feel of a site. A site without one is nearly naked.

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.

When I moved JFO from orange to green a year or so ago, I made a new favicon to reflect the design. The image is a cropped shot from the original header (which is now a full color photo, but still), and is a close up of Jorja’s face. It’s JUST recognizable as Jorja, I think.

Alternately, I came up with this image, which is a copy of the shot used on the header currently, done in greens to match the site. In a way, it’s both more and less recognizable, as the image is harder to make out (it’s a head and shoulders) but as it’s the same used in the header, people might make the connection. I’ve yet to use this on a live site, but it shows up on my test sites right now.

For the website ‘SCA Jews’, I had gone with a slightly eastern feel of a website, that evoked both the idea of camping with the concept of days gone by. Evening Sun came from spectacu.la, and took minimal editing to fit my plan. The problem was I had no favicon. Originally I put a little sun up there, but then it struck me that the ‘meaning’ of the site was to promote the meal plan “Meals on Camels”. What better way to express this than with … a camel.

I also helped design (or rather optimize the design for) my friend’s site, The Yeast I Could Do. She had no favicon and I spent a couple hours scrounging for something bread-ish, and eventually picked this one, even though it’s questionable. It does look a bit like a loaf of bread, and she recognized it, so I think it went okay. In it’s .ico format, it has a transparent background.

Finally there’s this one. Pony Wars is a joke site I made up with a friend for a “My Little/Pretty Pony RPG”. I mocked up the site because I was bored one day and finding an icon for it has been a bear. In the end, I went with this 33×33 (yes I know) icon of a pink pony. It doesn’t scale very well and looks weird on the site itself, but it’s a hard icon to shrink.

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:

What are your favorite favicons?