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:
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:
| The filename of the image | The image |
|---|---|
| favicon.ico |  |
| apple-touch-icon.png (the default image) |  |
| apple-touch-icon-57x57.png |  |
| apple-touch-icon-72x72.png |  |
| apple-touch-icon-76x76.png |  |
| apple-touch-icon-114x114.png |  |
| apple-touch-icon-120x120.png |  |
| apple-touch-icon-144x144.png |  |
| apple-touch-icon-152x152.png |  |
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.
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?