40% of the most visited websites have no favicon for mobile platforms
If you play golf, your swing may be just okay. But when Tiger Woods is on the green, you expect the greatest performance. If you can run a 100 meters dash in less than 12 seconds, you are already good. Enters Usan Bolt and you expect less than 10 seconds. And a gold medal. Do you know how much time it takes for your car to accelerate from 0 to 60 mph? Probably not. Buy a $100,000+ sport car and this figure will obsess you.
The same phenomenon applies to websites. Whatever your expectations for your own work are, when it comes to the greatest, most visited websites, you look forward for the best design. The highest security. The greatest user experience. The smallest latency. Zero downtime. Of course, these sites must do well on all modern platforms: desktop, smartphones and tablets. And, yes, so should do their favicons.
This survey targets the first 100 top sites listed by Alexa. In this list, you find the classic gang: Google, Facebook, Youtube, Wikipedia, Amazon... Some Chinese and Russian giants: Baidu, Yandex... And many others.
The top websites are mobile-ready
No surprise. In 2014, nearly all major websites are designed with the mobile in mind. Most of them come with a "m." version, while some others are responsive. Whatever the technical solution and the attractiveness of the result, this means one thing: the big players take the mobile seriously.
What "most" means exactly? 88%. What about the others 12%? After all, at this level of audience, we could aim for 100%. Well, a few intruders slip into the list. Take t.co, the Twitter URL shortener. While this service is extensively used across the Web, it is not a website by itself. Visit its homepage: this is just a few lines of content and a minimalist design.
All in all, there is no surprise at this level.
The favicon is stuck in the desktop era
Favicon starts with the favicon.ico file introduced by Internet Explorer. It is well-known and creating it is part of any web projects nowadays. In this respect, top websites are doing well: 98% of them exhibit a favicon for desktop browsers. This figure makes sense: favicon.ico was here before the iPhone, so even the outdated sites benefit from this old practice.
What about the mobile platforms?
The support rate for the iOS touch icon is 60%. If you bookmark or add to your home screen one of the others 40% websites, you will end up with a default icon or a "thumbnail" icon. Definitely not something you want on your Retina screen.
Unlike iOS, Chrome for Android has no equivalent for the Touch icon, except two 196x196 and 128x128 pictures with very little audience for the moment. It sticks to the iOS rules to get the job done, except that is does not handle as many cases. As a consequence, Android score is mechanically lower. The score found here is 29%, which is quite low. However, this figure should be considered carefully, see the methodology below. Suffice it to says that Android support is lower than iOS.
The last platform is Windows 8. As a challenger compared to iOS and Android, it cannot pretend to a huge support. No surprise, only 14% of the top websites define Windows 8 tiles. When Windows 8 cannot find a dedicated picture, it arranges something with the classic favicon, which is way too small to produce something good.
Let's sum up:
[table id=2 /]
Conclusion
These results are surprising and disappointing.
Sure, there are explanations. For example, add Google.com to the home screen of your Android device. Oops! Google has no icon for its own mobile platform! Is it so important? After all, Google is so integrated to Android that it makes this use case irrelevant. Better save a few bytes in the most visited web page in the world. Some sites, like Instagram, redirect you to their native apps, making their mobile websites almost useless. No need for a mobile favicon when the visitors are invited... to never come back.
Yet, why a site like Amazon has no Touch Icon? Can the existence of an iOS app justify this? As a website, Amazon.com is doing well on an iPad or an Android phone. A clear sign that Amazon does not bet everything on its native apps. A dedicated favicon would be the natural conclusion of the investment in web design: a pleasant experience for the loyal customers who want to see a big "A" each time they turn on their device.
Maybe the big editors ignore the mobile favicon because it costs more than it's worth. After all, in many cases, supporting mobile devices adds a few bytes to the HTML code and leads to additional picture downloads. The browsing experience may suffer because of this. But it doesn't seem to be the way the major players think. Let's consider the Touch Icon. 23% of the studied web sites have a apple-touch-icon.png in their root directory. This file is supposed to be a 152x152 picture. Why 152x152? Because this is the resolution needed by the iOS device with the highest screen density, a Retina iPad with iOS 7. Only two websites do this. You guessed right, one of them is Apple.com. The resolution of the pictures of the other sites is beyond the scope of this post. But you will sometimes find 57x57 images, often documented here and there on the Web as the reference for the iOS Touch Icon. Unfortunately, this information is outdated: 57x57 is the size for non-Retina iPhone running iOS 6 or prior.
In the end, top websites give the feeling to neglect their favicon. In many cases, the absence of support for iOS just doesn't make sense. The outdated picture resolution reinforces this hypothesis.
On mobile platforms, pictures and buttons are preferred to text and typing. The favicon, used as bookmark or home screen icon, is more exposed than on desktop, where the tiny picture is mostly here to spot a browser's tab in a blink. It is a bit awkward to note that so many major websites don't pay enough attention to this aspect, whereas so many time and money are spent in the sites themselves.
What should top websites do? They should review Apple, Microsoft and (optionally) Google specifications. These three pages contain everything you need to know to support most iOS, Android and Windows 8 devices and browsers. Keep in mind that Android follows iOS rules, this is why Google's recommendations can be skipped. Then, top players should investigate their requirements in term of support. Declare all iOS icons for a better support or declare only the biggest one to shorten the HTML code? Oh, they could also use a great favicon generator to fix all their issues at once. A little bit of self-promotion never hurts.
Methodology
To perform this study, I hacked the favicon checker to iterate over the top 100 list and dump the data I needed. If you tried the checker before, you noticed that it checks a lot of things and it is not very forgiving. Unless you generated your code with RealFaviconGenerator, you will probably get a warning or two. Obviously, I was not so inflexible for this study. For example, if a site had just apple-touch-icon.png in its root directory, the test was positive. Even if Apple recommends a lot of other pictures.
The checker looks for some known pictures and/or code to decide if a kind of icon is supported. For example, if apple-touch-icon.png is present, the test passes. Else, if apple-touch-icon-precomposed.png is present, the test also passes. Etc. If no rule succeeds, the test fails. This means that, if the checker lacks a rule, if might wrongly fail. In other words, although the checker should not generate wrong positives ("site abc.com support Windows 8 tiles"... whereas abc.com does not support Windows 8 tiles), it can generate wrong negatives ("site abc.com does not support iOS touch icon"... whereas abc.com supports iOS touch icon).
In order to mitigate the risk of massive error, I manually cross-checked some results I found suspicious. Apparently the checker did quite well.
Android Chrome adds some complexity to this guess-work. It mainly re-uses the iOS touch icon but it often fails at looking for conventional pictures (ie. trying to get /apple-touch-icon.png even when it is not declared in the HTML page). But not always. Therefore, it is hard to predict if a favicon will do well on Android or not. Android Chrome also looks for PNG favicon. Because these pictures are still rarely used, we can state this simple rule: Android Chrome support < iOS Safari support. For these reasons, the Android figure above should be considered "okay" but not very reliable.
Last but not least: out of the 100 top websites, only 89 were actually studied. Some "top sites" are actually "top domains", such as akamaihd.net. Accessing http://akamaihd.net/ just doesn't work. In addition, some of the homepages made the HTML parser failed, like Dailymail.co.uk. Such site was simply excluded. So when this post announces that 40% of the sites have no mobile favicon, it means 35 sites out of 89.