Favicons and Walker typeface trivia: “

For some time, most Walker websites have been without an important branding element: a favicon. Most often, favicons appear in the location bar, next to the URL of the site. They can also appear when a site is saved as a bookmark and in a browser tab. For sites with RSS feeds, favicons also often appear in the RSS reader as an icon next to the feed name.

I find I don’t often notice when a site is missing a favicon, but do notice when it has one. Coming up with a 16×16 pixel icon that somehow encapsulates the identity or brand of an institution is difficult, especially when said institution doesn’t have an official logo. In discussion, we thought about using a W, but thought it looked bland. The Walker typeface has a nifty alternate W, which is what we ended up using:

Side note: I recall Matthew Carter, designer of the Walker Typeface, discussing the typeface and W at an Typecon 2003. I remember him telling a story about the W, so I contacted him to clarify:

I did the disjointed alternative W in the Walker type convinced that I had invented the form. But later when I was at the AIGA conference in New Orleans I saw the same W on manhole covers. Some of my type designs have been inspired by lettering I’ve seen in the everyday environment — Mantinia is partly based on lettering on the Boston Public Library, for example—I use the Walker W as a facetious example of the environment ripping me off.

We’ve made use of Walker’s alternate W for most neighborhoods. However, a few sites that have their own identities or are a bit more unique get their own favicons:

• Most Walker sites
• Walker Blogs
• New Media Initiatives
• Design
• Visual Arts
• Performing Arts
• Film and Video
• Families
• Teen Programs and WACTAC
• Art On Call
• Gallery 9

The simplest way to put a favicon in a page is to simply drop the favicon.ico file in the root folder of your site. Most browsers will automatically see the file and display it. An .ico file has some limitations, most notably it does not support transparency. Most modern browsers (e.g. not Internet Explorer) support using a gif or png file that supports transparency, and will display cleanly when in a bookmark menu or a tab. To satisfy both groups of browsers, we actually use two icon files, a favicon.ico for Internet Explorer and a png for everyone else. Here’s what the code that goes into the head of every page looks like:

<link rel='icon' type='image/png' href='/favicon.png' />
<!–[if IE]>
<link rel=’shortcut icon’ href=’/favicon.ico’ type=’image/vnd.microsoft.icon’ />
<![endif]–>

Curiously, my browser of choice, Camino, ignores the favicon.png file and instead uses the .ico with it’s white background. However, I’m part of a very small minority and the .png with transparency works fine for Safari and Firefox users.

“

(Via New Media Initiatives Blog.)