A surprisingly complex subject, your favicon and other icons offer a final layer of polish to your website by showing this custom image in the browser tab or whenever a user saves your website as a desktop icon or to the home screen of their mobile device. There are a lot of different requirements to keep track of, but by ensuring you have different sized favicons and Apple touch icons available you'll cover the vast majority of cases. Read on to find out exactly how to do this.
A favicon is the little square icon which shows at the top of your browser next to a page's title and in your bookmarks menu. It's also used in certain operating systems when you save a website to your desktop. The favicon has traditionally been saved in the .ico filetype, however recently it is just as commonly seen as a png.
A favicon is just a small square image (usually displayed at 16x16) which should represent your site in some way. If you have a simple logo marque, you could just shrink this down in photoshop, or perhaps use some relevant initials. Because a favicon can be seen in a number of different places, it's wise to save this image in a number of different sizes (for example 16x16, 32x32, 64x64). It's still possible to go the traditional route and save these all in one file called favicon.ico, however the more modern (and easier) method is to save them as PNGs.
If you're taking the traditional favicon.ico route, simply uploading this to your website's root directory is all you need to do, no markup required! If you want to use PNGs, you'll need to add the following to your site's
<head> area (including whichever sizes you've created).
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="images/favicon-64x64.png" sizes="64x64">
Side note: favicons are notorious for caching aggressively, so if you've updated your image files but aren't seeing the change, add a random query string to the end of the href attribute to force a reload, like this:
<link rel="icon" type="image/png" href="images/favicon-16x16.png?v=2" sizes="16x16">
An Apple touch icon is an image file which is shown by Apple devices when a user saves your website or web app to the home screen of their device. Laterally, due to fairly widespread use, this icon has begun to be used by some non-Apple devices as well.
Like a favicon, an Apple touch icon should be a small symbol which represents your website, such as a logo. You can make numerous icons at different sizes to optimise for all different devices, or simply create one large icon which will be downsized automatically. At the time of writing, the advice directly from Apple was to make your largest icon 180x180.
If you're only serving one Apple touch icon to cover all bases, simply having a file in your website's root directory called apple-touch-icon.png is sufficient. If you want to serve multiple different sizes, you'll need the following markup in your website's
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon-180x180.png">
Hopefully this article has helped you get to grips with the nuances of favicons and Apple touch icons. It's a tiny detail but, especially with favicons, it's extremely noticeable (especially for fellow web creatives) when a website doesn't have one.