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.

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.

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

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 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

Fig. 1 - Logo shrunk to fit

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.

ABOUT THE WRITER

Jeremy Jones has a M.A in Advertising Design from the Savannah College of Art & Design (SCAD) and has worked professionally in many design functions including newspapers, magazines, freelance, and in-house for both small and large companies.

Tagged as: branding, design, favicons, website design