Sep 28, 2009

Favicons – 256 pixels of branding

Favicons (condensed from  “favorite icons”) are extremely small, 16×16 pixel graphics that help support your online branding in a very large way. Favicons function as an important visual reminder of your brand for users both on and offline.

Favicons are Everywhere

In all modern browsers (Internet Explorer 7,8, FireFox, Opera, Safari) your single favicon is used in a myriad of places.

Favicon in Address Bar

Address Bar - Favicons appear in every modern browser’s address bar to reinforce on each and every page that visitors are still on your site.

Favicon in a browser's tab

Tabs - When a user opens a new tab, your favicon is displayed above your page

Favicon used in a browser's Favorites Menu

Favorites - When a user creates a favorite of your website, your favicon is displayed next to your link in the favorite’s panel.

Favicons are not limited to online internet browsers. When a user drags your website onto their desktop, your site’s favicon becomes your offline “application” icon or short-cut.

Favicon as a desktop shortcut

Favicon as a Desktop Icon.

Designing Favicons

Unfortunately, favicons are difficult to design because of their extremely small size. The usual practice of taking a logo and shrinking it to fit the sixteen pixel square area can result in an undecipherable mess of colors. Instead, having a designer create a new design pixel by pixel produces a much sharper and memorable icon. Some company logos do not lend themselves readily to favicons. Logos that are just text or have large complicated graphics usually need to be interpreted into a new design that features the color scheme or style of the company.

Case Study: Connecting Point Church

Connecting Point Church's Logo

Connecting Point Church's Logo

Logo shrunk to fit

Fig. 1 - Logo shrunk to fit

Optimized Favicon

Fig. 2 - Favicon Optimized

Connecting Point Church’s logo features a four point graphic that was the logical choice for their favicon. When the four point graphic was brought into Adobe Photoshop and shrunk to fit the space, pixel definition was lost with the result of a blurry image (figure 1). To achieve the optimized image (figure 2), I had to manually manipulate the pixels that made up the four curves resulting in a much sharper depiction of their graphic.

With multiple avenues of continued branding at stake, not having a favicon or having an undecipherable favicon places your website at a disadvantage. To maximize your online exposure even the smallest details like favicons should be optimized to make you look your best.

One thought on “Favicons – 256 pixels of branding”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>