I was thinking about favicons today while working on a few minor design details for this site. Safari and Internet Explorer on Windows along with a few other browsers support favicons, a simple detail that can be used to help develop a site’s “brand” (I use the term loosely) and identity. They also afford a way to allow sites to stand out among others when browsing bookmarks.
For people like myself who keep extensive, organized and categorized bookmarks sets, the ones that stand out the most are the ones that include favicons. And like logos and other identity marks, they can be beautifully designed and appropriate for the end use or be a complete mess, unrecognizable and otherwise inappropriate for the intended purpose. In the case of favicons, being restricted to only 16 pixels square on average (you can technically create them at larger sizes), the simpler the better.
For Wishingline I created a set of favicons using variations on a single visual thread — colour. The orange version that will be used on the main Wishingline site, a blue-gray version used for the notebook, and a green version we’re using on our development server. The variations make it easy to identify which server we’re looking at when editing and testing while helping develop brand recognition. That, and it’s a small detail that, when added to the other minor details, goes to make up a great site.
For example, Apple, Adobe, Macromedia, and many other widely recognized companies are using favicons on their sites, just as the independents are. Take a look through your Safari bookmarks and see which ones stand out. I bet you’ll say it’s the ones with favicons. Now that you’re a believer — where’s your site’s favicon?
A Few Rules When Creating Favicons
First, keep it simple. Second, don’t go nuts with colour — stick to standard web colours or things that will display properly across platforms. Third, remember to include the appropriate link tag into the head section of your pages.
Keep in mind you can add as many favicons as you want — just adjust the link tag as needed. For example, different favicons for different site sections, subdomains — use your imagination.
How To Create Favicons
If you want to learn how to create favicons, The Iconfactory has some great resources along with their IconBuilder Pro plugin for Photoshop which can export the necessary .ico files. IconBuilder Pro is available for Mac OS X and Windows.