For those of you who are unfamiliar with favicons, they are essentially customisable short cut icons that are associated with a particular web page or site. They crop up in many forms – a favicon is the icon you see in the tab of your browser window, the icon that appears in Opera's Speed Dial or the app icon that appears on the iPad. Gone are the days when web designers could get away with just creating a bog-standard 16x 16 pixels favicon – Opera’s Speed Dial platform, for example, uses 256x160!
Adjusting Pixel Sizes To Suit Different Devices
Currently these are the standard pixel sizes you will need to consider when designing a favicon for different devices. Depending on the type of work you undertake for clients, you may not need to worry about the larger specs that are designed for the Chrome Web Store or the Google TV platform.
- 16x: Favicons of this size are displayed in browser tabs next to page titles and they’re also used in a typical Bookmarks bar. This is the bare minimum number of pixels you should be working with – if you try to develop a favicon with any less, Google will mark it as a 404 error.
- 24px: Internet Explorer 9 uses this in its toolbar.
- 32px: A new tab in Internet Explorer, pinned site in Windows 7.
- 57px: iOS home screen icon so that includes iPod touch, iPhone first generation to 3G
- 72px: iPad home screen
- 96px: GoogleTV platform, iPhone 4+ home screen
- 128px: Chrome Web Store
- 256px: Opera Speed Dial
Favicon Design Tips
There is a massive difference in size when you compare the 16x and 256px options, plus you'll have to create and tweak these icons separately. I would start with the biggest first and work your way down. A 16px icon needs to be rid of any light or shadow you might have added. It needs to be a flat icon with minimal colours and details otherwise it's going to be unclear. Work closely in Photoshop or Illustrator and get rid of any half pixels where the vector doesn't line up with the grid, as this will help in getting the crispness that you need.
Once all your icons have been created, upload them to your server. A lot of people tend to put them in the root folder on your website but as long as you link to them properly in the head of the document then you can put them anywhere you want. When linking, be sure to grab the right code off the web. I think it's best to link to the high res version first and descend to the lowest from there, so you make sure that's picked up first.
Last thing to do is test the favicon. Check what it looks like on all devices and make sure you're happy with its appearance!
Oly Russell is an experienced web designer and founder of 1st Web Design Essex. Click here to visit his website.