Create the perfect favicon

[bbasujon]

    Mobile

Create the perfect favicon
Create the perfect favicon
By Jon Hicks on December 20, 2011 | 3 comments

    inShare
    Short url

Today Jon Hicks' much anticipated Icon Handbook, published by Five Simple Steps, is going on sale. We present an exclusive excerpt on creating favicons

This is an edited excerpt from Chapter 3 of The Icon Handbook by Jon Hicks.

Even if you’ve never created any other types of icons before, I’m willing to bet that everyone reading this has at some point made a favicon. For the majority of you, it’s probably a regular task. They’re an ideal place to start, as we can look at ways of achieving pixel-crisp artwork and clarity at small sizes.

“A logo is a flag, a signature, an escutcheon, a street sign. A logo does not sell (directly), it identifies.”
Paul Rand

Favicons (also called shortcut icons) first appeared in Internet Explorer 5, where placing a favicon.ico icon in the root of a website would cause a 16px square image to appear next to the URL in the address bar and in bookmark lists, without requiring any HTML. Initially this had the added benefit of estimating how many times our sites were bookmarked by counting requests for the favicon, but this is no longer reliable since browsers started supporting the favicon for more than just bookmarks.

The difference between favicons and the kind of icons we’ll tackle in the application icons chapter, is that there’s no deliberation over the correct metaphor here. Their purpose isn’t to summarise an action or overcome language barriers, but to represent the site as a signpost and extend its branding into the browser. As such, it will almost always be a smaller version of the site’s logo. Fortunately, it is generally simpler to recreate a logo in sixteen pixels than an application icon.

While much larger sizes can also be used these days, a 16px version is essential and an ideal place to start if you’re new to designing icons. The skills you pick up from creating them will serve as the basis for the other types we’ll be looking at later. If you can achieve clarity at this size, the rest will fall into place!

Even if you’ve never created any of the other types of icons discussed in this book, I'm willing to bet that everyone reading this has at some point made a favicon and, for the majority of you, that it’s a regular task.
Advertisement
Before you start

Before we start creating any icon, we need to know how and where it will be used, as that will affect how we create and deploy it. The subsections below will cover the different considerations:

    What is the context?
    What sizes are needed?
    Which formats are needed?

What is the context?

A favicon could appear on a variety of backgrounds, so we will need to use transparency to get the best option to fit all. It won’t always be displayed on a white address bar background – it may appear on Windows Aero glass, a grey Mac OS X UI, or a dark browser theme. Firefox 4 also adds a grey button background to favicons in its address bar; it is set slightly larger so it will always border the favicon.
What sizes are needed?

If you were to create a favicon for every possible use, the sizes you would need to create are:

    16px: For general use in all browsers, could be displayed in the address bar, tabs or bookmarks views!
    24px: Pinned Site in Internet Explorer 9
    32px: New tab page in Internet Explorer, taskbar button in Windows 7+ and Safari’s ‘Read Later’ sidebar
    57px: Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
    72px: iPad home screen icon
    96px: Favicon used by the GoogleTV platform
    114px: iPhone 4+ home screen icon (twice the standard size for the retina display)
    128px: Chrome Web Store
    195px: Opera Speed Dial