One of the fin­ish­ing touches for any respectable web­site is a fav­i­con, which is the lit­tle square (usu­ally) 16×16 pixel icon that sits in all mod­ern web browsers. Orig­i­nally intro­duced as part of Inter­net Explorer 4 as a way to high­light book­marks, the fav­i­con has evolved to become the visual call­ing card of any site. It was orig­i­nally short for favorite icon, and its sits as a favicon.ico file in the root direc­tory of a website.

Fav­i­cons have become all the more impor­tant as browsers have intro­duced tab­bing, because they let a user eye­ball which tab belongs to which web page. Fav­i­con are such the pre­sump­tion that browsers will now have white boxes if there is no favicon.ico file found at the root direc­tory, which makes the site look a bit naked or incomplete.

There is a del­i­cate art to design­ing a fav­i­con, espe­cially since you only have 256 pix­els to play with. But it’s remark­able how sophis­ti­cated you can get within that space.

So what do you do?

If you’re lucky like Apple, your logo is both square enough and sim­ple enough to serve as your fav­i­con: .

Many of the brand name sites of the Inter­net stick with a sin­gle let­ter. Google unveiled a redesigned and low­er­case “g” as a result of a con­test. . Yahoo chooses a perky pur­ple “Y!”: . Wikipedia uses a spindly W: . Face­book uses an off­cen­ter f: . Twit­ter has a weird t from their larger logo that looks vaguely like a Japan­ese hira­gana char­ac­ter: . The New York Times uses its clas­sic let­ter “T”: . And bing uses an (ugly) low­er­case “b”: that is rem­i­nis­cent of the evil eye that is pop­u­lar through­out much of Turkey.

Stick­ing with one let­ter is the way to go, else you end up with a very cramped favicon.ico like ebay’s: . YouTube does a bit bet­ter, in part because it has more let­ters but fewer colors:

Geo­met­ric shapes are pop­u­lar too. seem pop­u­lar too. Flickr has blue and pink balls: and Yelp uses its sun­burst, . And other fav­i­cons are more func­tional: like Gmail and Google Spread­sheets . (It’s amaz­ing what you can do in 16×16 grid)

Here is a set of some of the best known ones on the Inter­net. How many do you rec­og­nize on sight?

For my For­tune Cookie Chron­i­cles blog, the theme of the icon was obvi­ous: a for­tune cookie on an orange back­ground . But I was stumped what to use for my fav­i­con for this new per­sonal blog. I knew I would be writ­ing about the future of jour­nal­ism, so I wanted some­thing that would evoke text and writ­ing. My first impulse was to do some­thing with an old Under­wood type­writer I have at home, maybe some­thing with the hammers.

I started think­ing about cool char­ac­ters, like the low­er­case type­writer “g”, and had an insight that one of the pret­ti­est char­ac­ters was actu­ally the amper­sand, “&.” And as it turns out, we have a blue amper­sand hang­ing up on our wall, a present from a friend, Marissa, who has a pur­ple one her­self on her wall.

I liked the sim­plic­ity of the color scheme, but the sophis­ti­ca­tion of the shape. Plus, the con­no­ta­tion of the amper­sand implies con­tin­u­a­tion, that the story is still going.

So I took a photo of our blue amper­sand (pic­tured above), knocked out the back­ground with Pho­to­shop, and had it shrunk into a fav­i­con size. My friend Alexis, who is a tal­ented designer and inven­tor of alien, helped me with my final ver­sion: .

If you are in the fav­i­con mar­ket, there are a lot of excel­lent free tools for cre­at­ing favicons.

• favicon.cc, an excel­lent tool that lets you draw a fav­i­con pixel by pixel on a 16×16 grid.
• Dynamic Drive, among oth­ers, allows you to upload an image which can be shrunk to fav­i­con size.
• Favicon.co.uk does the same thing, but in vary­ing sizes from 16×16 up to 64×64.