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