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?