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.”
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.
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!
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
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:
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.
For any format other than ICO, we need to point to it using the <link> element in the <head> of each page, with the appropriate rel and type attributes:
This also allows us to change the favicon on sites we don’t host, such as Tumblr or Blogger. Note that favicons don't need to be named favicon.ico or kept in the root of the site or application, but make sure you use the <link> element, otherwise the browser will be making multiple requests to try and find it.
Creating other types of favicon
As favicons tend to be left to the last minute, you may feel that there isn’t time to create any of the larger sizes in the list. It’s worth considering adding at least one more, though, as there is an increasing number of platforms that benefit from a larger favicon. In this section we’ll discuss how to go beyond the 16px favicon, and complete the extended icon set for our Five Details example case study.
Apple Touch icons
Ever since the first iPhone, iOS (as the iPhone/iPod/iPad operating system is now known) has supported Apple Touch icons, a larger favicon that is used when a site is added to the home screen.
If we don’t specify one for our site, iOS will just use a reduced screenshot of the page instead, which is hardly ever desirable.
Just like with favicon.ico files, we can add a file named apple-touch-icon.png to the root of our site, and iOS will discover it without needing a reference via a <link> element. We can also add an icon named apple-touch-icon-precomposed.png to the root; then iOS will use it without adding the gloss overlay, allowing more control.
iOS will also look for the appropriate size icon for the device first; Mobile Safari on iPad will look for icons named like so:
We should supply these icons, if we have the time.
So we can specify the various size icons for different iOS devices without any extra HTML. Android OS (2.1+) doesn’t support this, but it can make use of the precomposed Apple Touch icons if we point to them using <link> elements:
Android 2.2+ supports any Apple Touch icon, not just precomposed.
The value of the rel attribute here is proprietary to Apple, whereas everyone else uses just icon. In tandem with the sizes attribute, it also allows you to specify other sizes for iPad and the iPhone 4's Retina display:
Icons are listed largest first, so that iOS prior to version 4.2 (which doesn’t support the sizes attribute) gets the correct icon. Other than Android, Apple Touch icons are also being used by apps such as Reeder on the iPad.
Opera Speed Dial
Another example of an app that supports the use of Apple Touch icons is the Opera browser’s Speed Dial feature. Opera was the first browser to show thumbnails of the user’s favourite websites when they open a new tab (nine by default, but you can change the settings to display more):
With version 11, this was extended further, allowing website owners the opportunity to specify any size icon between a minimum of 114×114px up to a maximum of 256×160px (making use of their landscape shape), using the <link> tag and filename:
- <!-- Opera speed dial icon -->
- <link rel="icon" type="image/png" href="195x195image.png">
Again, this can be more desirable than a thumbnail of the site and looks splendid. Finally, when testing, it’s worth knowing that you can right-click a Speed Dial and choose Reload to make Opera get the latest version. It will always be shown with a white border and, depending on window size and number of Speed Dials, the icon itself won’t always be displayed at full size.
Drawing the larger icons
Going back to our artboards in Illustrator and starting with the largest, we create the 114px icon. This will be seen at half the size on the iPhone 4’s Retina display, which is twice the resolution of the original iPhone screen but has the same physical dimensions. So if we want a stroke to appear as 1px on screen, we’ll need to draw it as 2px. However, 1px will still be visible, and we may prefer the lighter line weight in some contexts. Alternatively, if you’re working in Photoshop, you can keep it at 1px and add a 50% inner glow of the stroke colour to achieve a compromise.
The only way to be sure is to test on the device. I can recommend the iOS app Review for testing this easily, but we can also test by increasing the canvas size of the image to 640×960px and importing to the iPhone via the built-in Photos app.
It’s also worth bearing in mind that any transparent areas in the artwork will appear black (so custom iOS backgrounds will not show through). Don’t include any rounded corners in your artwork, as these are added by iOS. However, it may be useful to know the radius of the corners and how they will affect it. Refer to the icon reference chart in the appendix for the various sizes, and the iOS icon template in the downloadable pack to preview your icon with rounded corners and gloss overlay.
This artwork can then be resized to 50% and used as the basis of the 57px artwork. If your calculations are correct, this shouldn’t need any optimising, and should fall on the pixel grid exactly. Traditionally, icon sizes are neat doubles of each other: 16px → 32px (×2) → 64px (×2) and so on. This isn’t the case with the iPad icon, at 72px. Again, take the largest size, and resize and optimise this, rather than vice versa, for the best results.
This part of the process is similar to that of creating application icons for various OSes, which is covered in more detail in chapter 7.
Finally, to export each artboard as a PNG, use the script provided in the goodies pack. We now have four correctly named and sized PNG files in the root of our site.
At a bare minimum, we should always include a 16px favicon.ico file with our website, rather than leave it up to the browser to use its default icon. It not only looks good: it also strengthens our branding, and sticking with the ICO format ensures that Internet Explorer can make use of the icon.
Not including a 16px favicon means the browser default is associated with your site instead and it increases HTTP requests, a problem that is amplified on high-traffic sites.
While it may not be necessary to create all the icon sizes suggested in this chapter, it’s definitely worth creating a large version favicon as well, such as 128px, which could then be resized to provide icons for different devices like the iPhone 4, as well as suiting uses such as the Chrome Web Store and Opera’s Speed Dial.