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|
|apple-touch-icon.png (the default image)|
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?