Jon Hicks presents a guide to creating the perfect favicon size image from scratch using Adobe Illustrator.
This guide will show you how to make a professional-looking favicon size image for your website - it's easier than you think! 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. They're an ideal place to start, as we can look at ways of achieving pixel-crisp artwork and clarity at small sizes - and it will be unique and far better than the free icons you'll find on the web.
Brief history of the favicon
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 application icons, 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 16 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.
01. 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
Do we really need to supply all of these? As always, it depends on context. A site for a Mac and iOS software company would benefit from the various iPad and iPhone specific icons, whereas an intranet site that will only be displayed in Internet Explorer would be better off with a multi-resolution ICO file. A web app, designed to be viewed on mobile and desktop would benefit from spending the time creating all of these sizes.
While it is possible to use a 32px icon that can be reduced by 50% to 16px (for example, by using 2px strokes that will reduce neatly to 1px), this relies on the browser to scale it, and it may crop it instead. It'll also result in a larger file, and we want to keep the favicon files as small as possible.
However, a really good compromise is to supply a 16px icon and one large size icon, such as 128px, that would be ideal for large uses such as the Chrome Web Store and Opera's Speed Dial. While a 128px image resized to 57px won't look as good as a bespoke, optimised 57px image (as it doesn't reduce evenly - 44.5%), it may be satisfactory for your needs. In fact, this is exactly what Apple does: it only supplies one more icon other than the favicon, an apple-touch-icon.png icon sized at 129px. What's good enough for Apple...
Whatever you decide to do, at the very minimum a 16px icon is essential to avoid the browser default icon. Safari displays an attractive blue globe, but most will simply show a blank document icon:
If you don't include a basic 16px favicon, it's a lost opportunity to extend the brand of the site beyond the page itself. A missing favicon.ico file also causes problems on high traffic sites, as the server will generate a 404 error for every first request. Firefox remembers sites that are missing a favicon and doesn't re-request them, but it's the only browser that does this.
What formats are needed?
In the early days, when a Windows ICO format was the only file type supported, there was a little timesaving trick we could rely on - save a favicon as a 16×16 GIF and simply rename it, giving it a .ico file extension. It was a hack, but it worked! Nowadays, we don't need to and shouldn't use this method as tools for creating an ICO file are more readily and freely available online. In addition, other formats are now supported for favicon usage, although there are essentially only two formats worth considering:
- The ICO file is still the most widely supported. Unlike PNG it can contain multiple resolutions and bit-depths, which is very useful on Windows. Internet Explorer uses favicons in a variety of sizes, such as the 32-pixel icon for the Windows 7 taskbar, and an ICO is the only way to offer these. It's also the only format that is detected without using a <link> element.
- PNG can be more convenient, however, as it doesn't require any special tools to create, it supports alpha transparency and gives us the smallest possible file size. Its only drawback is that Internet Explorer doesn't support it (it only accepts ICO).
As for the other options:
- GIF and animated GIF offer no advantages other than support for very old browsers.
- JPG is an unlikely choice, even if the image is a photo. It lacks the crispness of PNG, and you won't see any benefit from its better blends at such a small size.
- SVG would be excellent if more browsers supported it for favicon use, but only Opera does currently.
- There is also a cheeky little subformat of PNG – APNG (animated PNG) – supported by Firefox and Opera, but its usefulness is questionable. An animated favicon just looks irritating and needy!
02. Drawing at 16 pixels
Now we've looked at the background information and preparation for creating favicons, let's get our hands dirty and start drawing some icons.
This handbook doesn't presume to know what graphics editor you prefer to use, as tools are very much a personal choice. What works for me won't necessarily work for you! Whatever app you use, though, it must allow you to create vector artwork with a pixel preview, rather than just smooth high resolution. It's also helpful if lets you see a pixel grid, making it easier to draw and plan the icon. With 16px icons in particular, you'll want to make sure that straight edges are kept within the grid, as anything halfway will make the icon appear blurred:
Case study: Five Details favicons
Five Details designs and develops software for Mac, iPhone and iPad. For this company with more than 100,000 users of its Flow and Seamless apps, and an Apple Design Award under its belt, Hicksdesign created the Five Details logo, branding and website.
For our example workflow, we'll be taking our original vector file and creating a 16px favicon from it, as well as the other sizes for the website. As Five Details focuses on Mac software, the context for this is going to mean a heavy emphasis on Mac desktop browsers and iOS mobile devices. It's worth spending time, therefore, making sure the full range of optimised Apple Touch icons are created as well: 57px for iPhone and iPod Touch, 72px for the iPad and 114px for the iPhone 4's Retina display.
In Illustrator, I've set up an artboard for each icon size. I prefer being able to see each size, side by side, rather than have an individual file for each. The artboards are named with their intended filename (such as 'favicon' or 'apple-touch-icon-114x114-precomposed') as this will be used when exporting with the script included in the goodies pack.
We'll begin by resizing the artwork to 16px and seeing what we get. If the original happens to be a neat multiple of 16, then we'll be off to a good start, but it's more likely that it will need to be tweaked or redrawn from scratch, possibly even as pixel art (drawing each pixel individually) to ensure clarity. That isn't as daunting or time-consuming as it sounds, though!
If the image needs to include a background (as the Five Details icon does), then any padding that you need will reduce the size of the actual logo even further. While your icon doesn't require a background, it might help to control its contrast in a variety of environments. A simple grey favicon might look nice and subtle in a white address bar (bottom right), but when displayed on a grey tab in a Mac browser such as Firefox, it's easily lost (top right).
The two solutions to this is are: to use transparent black (rather than grey) to allow it to darken proportionally in relation to it's background or add a coloured background to the favicon that will suit all circumstances. In this case, I felt it would have more strength on top of a light grey box background, with 3 pixels of padding on each side, which reduces the actual logo size to just 10px:
Unfortunately the edges don't fall neatly on to full pixels, and the gap between the two parts of the logo is almost closed up. In some cases we can tweak the anchor points of the path to make it sit on the pixel grid properly. If your chosen graphics editor supports pixel snapping (where it snaps the path you're editing to the pixel grid) then you'll find that you need to alternate this on and off for different tasks: for snapping straight edges it's very useful, but editing curves (such as the right side of the logo) is easier if it's off. Sometimes we'll want the path to sit halfway between pixels, not just for curves, but to deliberately create softer edges for elements such as shadows.
In this case, however, the simple shapes are easier to recreate in vectors from scratch. This at least gives the right proportions to help us recreate it. Placing the reduced artwork in separate layers and locking it allows us to use it as a guide, working on top of it.
It may be that we have to take some liberties with the logo proportions to get it to work, but 16px is very forgiving, and crisp artwork looks better than precision. If the shape still isn't working, we can try redrawing it in single pixels, either with bitmap tools like a pencil or preferably with vector rectangles, and then create our own anti-aliasing by changing the opacity of single pixels (in this case 1px square vector rectangles) where you want smooth edges:
This gives us very fine control over the smoothness of curves, but is obviously rather fiddly. We'll have to zoom out often to see how the effect looks at actual size. Now we have the crisp silhouette, we can move on to adding other subtle elements such as inner shadow and white highlight at the bottom edges, all helping to visually sharpen the edges:
The border has been accentuated by adding an inner highlight – a 50% white stroke that is just enough to provide contrast, making the edge feel crisper. Some applications like Illustrator and Opacity allow you to add multiple strokes to the same vector object. For those that don't, you would need to make sure that you reduce the rounded corner radius to suit. For example, if the outside border had a radius of 4px, the inner highlight radius would need to be 3px to look correct.
Transparency is worth considering, as both ICO and PNG files support it. Assuming that this favicon will always be viewed on a white background would mean specifying a light grey border for our Five Details favicon:
The lightness of the border stops it being too distracting from the main element – the logo. However, we will not always view this on a white background, and when viewed on other backgrounds, the border jars badly:
Instead of a 20% grey, using a black at 20% opacity would allow the border to blend in with the background and sit more comfortably:
03. Other favicon gotchas
Our favicon artwork is now finished, but there are other pitfalls to avoid. It's best not to try and reproduce any perspective as this will reduce the icon's visual weight and require more anti-aliased pixels, making edges appear less crisp. Notice how the Reeder app website changes the isometric box logo to use a side-on perspective for the favicon. It's clear and still recognisable as the Reeder app.
It might also be the case that the logo's proportions aren't square, and that it's too complex to reproduce in 16px. To get around this, select a strong element of the logo rather than attempting to show the whole thing. Mailchimp does this, focusing on Freddie the Chimp's head, rather than the whole chimp or logotype:
There are always exceptions, though, and despite your best efforts the logo and restrictive size is against you from the start. The BBC favicon is a good example of a logo that doesn't scale easily to a favicon, but also can't be reduced to a selected element without losing the brand. The white space top and bottom reduces its visual weight compared to other favicons, thereby diluting its importance.
However, this particular favicon highlights another potential issue with multiple ICO files. While the favicon.ico file contains both a 16px and 32px optimised icon, Webkit browsers such as Safari and Chrome only display the 32px icon and reduce it to 16px, creating a unrecognisable mush:
The only way to avoid this is to add a 16px PNG favicon as well and add the <link> element to the HTML.
If we're just making PNGs then this stage is straightforward, but creating the ICO requires a few more steps. There are many free online tools which will take a PNG and create an ICO for you (see appendix), or you can export it as one directly from Photoshop.
If you want to create an ICO with multiple resolutions, however, such as the 32px that Windows 7 uses for the taskbar, you will need more specialist software such as Iconbuilder, a plugin by the Iconfactory to be used in Photoshop or Fireworks. Iconbuilder comes with templates ready to place your artwork in, such as the Windows one here:
With all the artwork in the correct box on the icon layer, we can then go to Iconbuilder (via Filters) and choose the Windows preset. Press Build and check each size looks correct in the preview window:
Any sizes or colour depths that aren't needed can be removed in the sidebar. If all looks good, we can then save as an ICO. Iconbuilder can also export in other formats at the same time, such as a set of PNGs for each resolution – very handy.
Next page: the four remaining favicon creation steps