Website bookmark icons are an aspect of web design that was once very simple that has now become ridiculously complicated. How did it become this way you ask?
Website Bookmark Icons: Favicons
Favicons are a 16×16 icon file that was introduced by Internet Explorer 5. At the time the browser would display them in the following circumstances:
- Before the URL in the address bar.
- The bookmarks folder.
- The links bar
- On bookmarks saved to the desktop.
Originally they were only displayed if a user bookmarked the page. Starting with IE 7 the icons would be displayed automatically. All other browsers prefer the latter behavior.
To this day Internet Explorer will only recognize a favicon named favicon.ico in the root directory of a web server. Internet Explorer only recognizes ICO format. Google Chrome, Firefox, Safari, and Opera do not suffer from these limitations. Each of those browsers can support PNG, JPG, and GIF formats. They also do not care where you store the file on the web server. They will even accept a file on another domain! These browsers can support bookmark icons through a
<link> element in the
<head> of a web page. For example.
<link rel="shortcut icon" href="/favicon.ico">
Favicons usage has changed in recent years. Excluding Safari, all browsers will display a favicon on a browser tab. Google Chrome has never displayed a favicon on the address bar. Firefox followed suit in version 13 citing security concerns. They realized that malicious websites may use favicons to display a padlock icon that could trick users into believing they were on a secure website when this is not the case.
Regardless of the various differences, favicons were easy to support on all browsers. Just create an ICO file named favicon.ico, upload it to the root folder on your webserver, and add the tag to your website. Then came iPhone and opened the floodgates.
Website Bookmark Icons: Mobile Devices
The Apple Way
Prior to the days of retina, all icons on the iPhone and iPod Touch were 57×57. Apple knew that users would like to add website bookmarks to the home screen. They also knew that blowing up a favicon to this dimension would look terrible. They created The Web Clip. Web Clip files were originally named apple-touch-icon.png and were located in the root directory of a web server. It could also be added through a
<link> element in the
<head> of a web page. This link tag looks like:
When done through a
<link> the name and location of the file does not matter.
In iOS a Web Clip will automatically add rounded corners, a drop shadow, and a reflective shine. Some brands did not like to have these elements automatically added to their icons. Apple would then detect files that named apple-touch-icon-precomposed.png prior to the apple-touch-icon.png file, and
<link> tags that had the
rel value of apple-touch-icon-precomposed. If it saw any of these files it would not apply any of these effects to the icon, unless the icon has transparency along the edges. Apple’s argument is that icons could look bad on some home screens so they add a black background and round the corners. Of course, if your icon was black then having a black background added to it looks even worse.
Then came the iPad. Apple bumped up the dimensions of icons to 72×72 on the iPad. This meant that you needed two different icons to support iOS devices. Apple decided it would now automatically check for files named
apple-touch-icon-[DIMENSION_HERE].png. Where [DIMENSION_HERE] represents the dimension for that device. This would prove useful when Apple added retina to their devices which doubled the size of icons on the iPhone/iPod Touch and the iPad to 114×114 and 144×144 respectively.
Apple also needed to update the
<link> tags they supported. They did this by adding support for the
sizes attribute. For example, the link tag for the iPad will look like:
apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
Google and Research in Motion added support for the various forms of apple-touch-icon to the stock versions of Android and BlackBerry. I cannot speak for BlackBerry devices, but Android does not apply any of the iOS effects to the non-precomposed icons. BlackBerry OS 6 only supported the
apple-touch-icon version, while Android 1.5 – 2.1 only supported the
apple-touch-icon-precomposed version. Since neither of them support the
sizes attribute we recommend the following order for listing icons:
-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">
-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
The HTML5 Way
As you might guess, Apple do not like the name used for these icons. The HTML5 standard has chosen to use the much more generic value of “
icon“. They also added the
sizes attribute to the HTML5 standard. Unfortunately at the time of this writing no browser supports this attribute. This has cause a split on what icon should be used.
Largest image available:
- Firefox mobile on Android
- Opera speed dial (with a minimum size of 114×114)
- default Android browser (as of Jelly Bean) for the bookmarks section, but uses the apple-touch-icon for the home screen.
First image available:
- Chrome for Android when adding to the home screen
Last image available:
- Firefox desktop
- Chrome desktop
- Firefox OS
The closest image to 96×96
At this time I would recommend only adding a single bookmark icon using the HTML5 method. I would recommend images with the sized at 96×96.
Do you see why I call say website bookmark icons are ridiculous now? What do you think? Do you recommend a different size? Do you know yet another use for website bookmark icons?