You know those little favicons, where people try and make something resembling their logo appear in a teeny, tiny 16×16 pixel image. They show up in the navigation bar of many browsers and also appear in browser bookmarks or favorites (hence the name favicons which was shortened from favorites icon). But while they definitely have the coolness factor, especially if you manage to capture your site’s look successfully in the favicon, does your site really need to incorporate one? The answer, surprisingly, is yes.
A few years ago, favicons were only seen on a handful of sites, either super geeky ones or big brand ones. But since then, favicons have been becoming more mainstream and much more common to see. So while they have been gaining popularity, some savvy marketers are using them for branding as well as to encourage repeat visitors. But how, you might ask?
Favicons is a visual branding opportunity that many people are missing out on when planning their marketing campaign. People tend to dismiss using them as being too geeky, too much work to create or just lack of knowledge on how to do it. But the visual branding and reminder of your site is the most important role a favicon plays, and one you definitely shouldn’t miss out on.
Have a look at your favorites list. At a glance, which ones stand out? In Internet Explorer it is definitely the ones that have a colorful favicon next to their name rather than the IE “E” on a piece of paper. And it is worth noting that while IE6 only updated the favicons when you visited a site, and then would need to be revisited to display on subsequent browser sessions, IE7 automatically updates them and now shows them in the address bar.
Favicons also appear on the tabs of tabbed browsers, such as in IE7, Opera and Firefox, as well as many of the toolbars that create tabbed browsing in IE6, such as the Yahoo toolbar. Again, this is an additional branding opportunity while people have your site opened in a tab, even if it isn’t the site they happen to be viewing at the time.
Favicons also appear in the address bar of multiple browsers (although not in IE6 unless the site is bookmarked) for additional branding within the browser.
Favicons can also create better usability for your site, as visitors to your site can easily and quickly identify it in browser tabs without even having to read what it says in the tab, which is especially useful if you are using your titles correctly and are not starting all your site’s pages with your site name.
When designing a favicon, definitely avoid using the color blue. Unfortunately, even if your site’s theme is blue, the icon will end up just blending in with all those blue “E”s and you have lost valuable branding and visibility.
If you have a logo that easily translates into something 16×16, your best branding opportunity is to use it. This is how Nike and Apple quite successfully create their favicons.
Does a favicon need to be fancy? Not at all. If you can’t recreate your logo, or part of it, within those 16×16 pixels, consider creating an icon using just the first letter of your company name using your company’s colors to do it. Many sites do this for their favicons, and this is how both Google and Yahoo display their favicons for surfers, as well as Amazon.com.
Along the same lines, you can also use something like an exclamation mark or an asterisk as your favicon, again something that will catch the eye of surfers.
Flickr.com created their favicon by utilizing two colored circles, derived from the same colors featured in their logo. So abstract images utilizing site colors is also a way to create an identifiable favcon for your site.
So how do you create a favicon? It is actually easier than it sounds. Simply take your 16×16 gif or jpg and save it as favicon.ico (which is supported by many graphics programs today, such as Photoshop) and upload it to your root directory. Then add:
<LINK REL="SHORTCUT ICON" HREF="http://www.example.com/myicon.ico">