There are many little details that separate websites that look professional across devices and browsers from those that don’t. The favicon and the apple-touch-icons are one of those small extra details that make all the difference in how your site is perceived by users.
Apple Touch Icons
The browser on touchscreen Apple products (the iPhone, iPod touch, and iPad) offers the option to add a bookmark to a link directly to the home screen alongside the users apps and widgets. If your site doesn’t provide the apple-touch-icon markup, then the icon will just be a screenshot of the webpage. This is generally quite ugly as most websites don’t fit well in a 57px square! However, if you set an apple-touch-icon link to a PNG image, the browser will use that as an icon instead.
There are 4 image sizes that correspond to the 4 different Apple touchscreen product resolutions currently available. These are (in pixels):
- 144×144 (iPad retina)
- 114×114 (iPhone retina)
- 72×72 (iPad)
- 57×57 (iPhone)
If you already have a square logo or icon image for your site, save 4 versions of it resized to these dimensions and upload them to your images directory. The filenames can be whatever you want, but I suggest using something like
apple-touch-icon-iphone.png so you can keep them straight.
Since Apple is likely to add higher resolutions in the future, it would be a good idea to save the full size logo or icon you used to make these. That way any apple-touch-icons you make in the future will look the same as those you’ve just made.
Once you have all 4 PNGs uploaded, add the following code to the
<head&rt; section of all of your pages (remember to change the
href attribute to match your path and file names):
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-ipad-retina.png" /> <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-iphone.png" />
Favicons in HTML5
The favicon has been used by browsers for over a decade. While browsers use this icon in slightly different ways, it is generally used to represent your site in open windows and tabs, and in saved bookmarks.
Firefox has stopped using the favicon in the url bar due to security concerns over scam sites that used padlocks and other images to give the impression the connection was secure. However it is still uses them in tabs and for bookmarks.
Your favicon should be a square image up to 64px on a side. You can use any image type for a favicon, but for the greatest compatibility across browsers, you should use an ICO image, named
favicon.ico, placed in the root directory of your site. You can use sites like favicon.cc to convert an image you already have to the ICO format.
Once you have uploaded the icon, add the following line to the
<head&rt; section of all of your pages (change the
href tag if necessary):
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
Tada! Resize a few images, add a few lines of simple code, and your site now offers an exponentially more branded user experience!