CodeProfessor

Branding Your Site With Favicons July 23, 2006

Looking for a way to brand your website/ weblog without some honking big logo? Try a favicon. Depending on the browser you’re using, if you look up where the URL of this page is displayed, you might see a light green triangular icon with a black spiral. That’s my “favicon” version of my Chameleon Integration Systems‘ logo (seen somewhere on this page.)

The original logo was sketched out by me, then reworked by Bill Dubs, my brother’s biz partner for their award-winning “green” ad agency, Dubs & Dash. The spiral represents the tail of a chameleon, the green simply speaks to me personally. The original sketch was actually thought out at great length by me, and I drove Bill crazy to get the colours right. While it may not be apparent to anyone who doesn’t know me, the logo incorporates a lot of my geekiness. The logo represents me, from my perception, but without being in-your-face to anyone else.

However, the finished logo is not currently displayed on any of my sites because of layout reasons. I’m working on a blog network-wide Wordpress theme that incorporates it, but time is at a premium for me, so the new Wordpress theme has been long delayed. As an alternative, I opted to use a favicon on most of sites. My “brand” would thus appear on each site without being intrusive and clashing with current theme colours: .

Notice that the favicon is only 16×16 wide and thus should not be too “busy” in design. What I actually did was take an older version of my logo that I had created in Inkscape (a cool, free SVG/XML-based vector-drawing graphics program on Linux, Windows, and Mac OS X), and used a simplified spiral on a flat-toned triangle. The icon gets most of the visual gist of my full logo an remains unique. (At least for now.)

Favicons can be created from pretty much any image, and have an extension of .ICO. (Photoshop supports this extension; other graphics programs might as well.) Not all browsers display the icon properly in the URL area, so if you use one, don’t expect that all of your readers will be able to see it.

Terry Zulit has a bit of a tutorial on how to create and use a favicon.