Bookmark icons and Apple Touch icons

Taxonomy: 

Location

France
47° 34' 54.6528" N, 2° 39' 31.2876" E

The favicon has been around since 1999 as a 16 pixel square image in the .ico format. Although it can now be provided at a size of 64 pixels square, it’s function remains the same. It appears next to a web page’s page title on your browser’s tab or alongside the URL address of a web page within your browser’s bookmark system. If you don’t have a custom favicon image provided for your website, your browser will provide a default image.

This is how the favicon for this website shows up inside my copy of the Google Chrome browser:

Browser tab with favicon next to the page title

A browser bookmark showing a favicon

With tablet computers, this gets a bit more interesting because they can display larger versions of these images. This is especially true for iPads and Retina devices with high-resolution displays. To satisfy these devices, a bigger selection of images needs to be added to the website. Here are the ones that I’ve used for this website:

Website bookmark icons - names and image sizes
The filename of the imageThe image
favicon.icoA website favicon at 64 pixels square
apple-touch-icon.png (the default image)The deafult 57 pixel square Apple icon
apple-touch-icon-57x57.pngAs above with pixel count embedded in the name
apple-touch-icon-72x72.pngThe deafult 72 pixel square Apple icon
apple-touch-icon-76x76.pngThe 76 pixel square Apple icon
apple-touch-icon-114x114.pngThe 114 pixel square Apple icon
apple-touch-icon-120x120.pngThe 120 pixel square Apple icon
apple-touch-icon-144x144.pngThe 144 pixel square Apple icon
apple-touch-icon-152x152.pngThe 152 pixel square Apple icon

Here are a couple of screenshots of the desktop of, first, an Apple iPad and, second, a Google Nexus 7, showing these particular bookmark icons amongst an array of other ones.

iPad bookmarks on the iPad desktop
Google Nexus 7 bookmarks on the Nexus desktop

All websites I build these days now come equipped with this type of image icon. So what sort of design would you like for your website’s icon?