…the making of a Web page logo

You may have noticed some changes in how my blog looks after my recent changes.  The most notable changes are:

• A revised page header which includes a new “search” capability and a different treatment for the title text.
• Different fonts for article titles and text.  In particular, i spent some time getting the hyperlink text to stand out from the rest fo the text.  If you look closely, the links are not only bold, they are another font entirely.
• A new “What i’m writing about” block to the right which shows  topics based on how often I discuss them.

The final browser icon for my website.

Sadly, one of the details I spent the most time on is much less obvious than those broader design elements.  I decided to make a unique Web Page Logo for the blog, commonly known as a “favicon”.

If you are viewing this blog on a modern tabbed web browser, you will see a little logo for each web page in the tabs.  If I make no effort as a web designer, a generic logo is provided by the browser.  I decided this wasn’t good enough, and wanted to create something attractive but simple.  This was a difficult challenge, as you are limited to 16×16 pixels, which is excruciatingly small.

My inspiration for the logo is the strongly typographic logos used by a variety of web services today such as Facebook, Google and Bing.  I wanted something that fit somewhere between a literal “letter in a box” and an abstract “logo”.  I particularly liked the idea of text bleeding off the edge of a logo since it feels less rigid.

Browser icons from several popular web services.

As you can see, I went through several iterations before designing the final logo.   (I also tried a similar concept using the whole word “tom”, but 16 pixels was inadequate to fit the word in a readable manner.)  The final design is unique enough to aid in quick recognition, but is still logically tied to my name and the web site identity, since it uses the same color palette.

Since my WordPress theme came with a logo (left), I decided to make a more personal logo.