SVG support

RealFaviconGenerator now accepts SVG pictures, in addition to PNG, JPG and GIF. Not a big deal, just the ability to jump right from Adobe Illustrator or Inkscape to RealFaviconGenerator.

When using a SVG picture, the scaling algorithm option is no longer accessible, since “scaling” is somehow replaced by “rendering”. And rendering is (supposed to) be way better than scaling.

That was issue #34.

More browserconfig.xml, less HTML

browserconfig.xml was introduced in Internet Explorer 11 and lets you define advanced web application tiles. Most of its features are too advanced for web applications that do not target Windows 8 platform capabilities. However, browserconfig.xml is very useful when it comes to favicon: it defines the various tile pictures and background color.

In fact, browserconfig.xml is not necessary. Tiles can be described directly from the HTML code. But the extra XML file has a sensible advantage: unlike HTML pages, it is loaded only by Windows 8 devices. And since most visitors do not use the Windows 8 + IE11 combo, we are glad not to clutter them with useless stuff.

By default, IE11 looks for browserconfig.xml at the root of the web site. RealFaviconGenerator takes advantage of this characteristic. Since a few months, when you choose to place the favicon’s files in the root directory, the XML file is generated. Yet, as Giuseppe Caruso pointed out, the location of this file can be overridden with the help of a <meta> tag. RealFaviconGenerator now uses this markup to rely on browserconfig.xml whatever its location. That was issue 32.

The gain? A few hundred of bytes. Nothing fancy, just the kind of little improvement that makes the service better, day after day.

Apple touch icon: The Good, the Bad and the Ugly

Warning: With the release of iOS 8, the recommended size is now 180×180. It was 152×152 when this article was published (updated 2014/12/26).

Whatever you use an iOS or Android device, the Apple touch icon appears as soon as you bookmark a web site or add it to your home screen. It is the only element still visible once you leave the site. It should be in the checklist of every web project. But this is often not the case.

A link to Apple web site
A link to Apple web site

For this study, the Apple touch icons of the 5,000 most visited web sites were studied. More precisely, this analysis focuses on the apple-touch-icon.png file located in the root directory. Although this file is not a strict requirement, it is so emblematic that studying it alone makes sense. More about this in the methodology below.

First things first: how many apple-touch-icon.png were found and probed? 804. This 16% score sounds low, but again, this file is not required for the Apple touch icon to work. A previous study concludes to a 60% support rate. Therefore, this figure should not be taken too seriously. What matters is what lies in these 804 icons.

The right answer was…

152×152. 180×180, thanks to iOS 8 (updated on September 26th, 2014).

Apple defines 4 icon sizes, from 60×60 up to 152×152. What the specifications forget to mention is that these sizes are for iOS 7. To support iOS 6 and prior, you need 4 other dimensions.

iPhone iPad
non-Retina Retina non-Retina Retina
iOS 6 and prior 57×57 114×114 72×72 144×144
iOS 7 60×60 120×120 76×76 152×152

The specifications do not explicitly define the size of the apple-touch-icon.png picture, but  a good practice is to provide a 152×152 picture. An iPad with a Retina screen running iOS 7 will use it as is, while the other devices will scale it as needed (unless they find a more suitable icon).

How many web sites follow the 152×152 recommendation? 33. A good 4%. Oh. Among them, Apple.com.

Nearly as many sites have a 60×60 icon, which is the other size you might pick after reading the Apple specs. Some others resolutions are more popular, like 114×114 (79 sites) and 144×144 (72 sites). But the winner is clearly 57×57 with 281 sites. This resolution is outdated, but it is still the reference. Google for “apple touch icon size”: at the time of writing, the first result is from StackOverflow and the first answer documents 57×57.

An apple-touch-icon.png with an iOS 6 size is the sign that it has not been updated for a while. Yet, it does not prove that the Apple touch icon won’t work on modern devices. Take Bing.com, one of the 57×57 supporters: it also defines apple-touch-icon-152x152.png. You shiny iPad will use this picture.

made with ChartBoot

This leaves us with 68% of apple-touch-icon.png with a resolution recommended (or used to be recommended) by Apple. And 32% of… something else.

Apple touch icon bloopers

Creative resolutions

18 sites have a 100×100 icon, like imgur. Stackoverflow, TheGuardian and 15 others use a 158×158 picture. NewRelic’s icon is 80×80.

Some sites anticipate the Super Retina HD screen: Tumblr exhibits a 300×300 picture. BuildWith and 6 others come with a 512×512 icon. ClipHunter (not safe for work…) takes this very seriously with a 1024×1024 picture.

Although these sizes are unexpected, iPhone and iPad are able to process them.

Square icons are so mainstream

Sure, the 175×175 icon of Flickr is not standard. But at least, this square picture can be scaled as needed by iOS. On the other hand, the 155×45 picture of Kioskea cannot fit the iOS UI. Apple’s mobile platform does its best but it makes no miracle.

The 155x45 apple-touch-icon.png of Kioskea
The 155×45 apple-touch-icon.png of Kioskea
Kioskea bookmark
Kioskea bookmark

The 1194×687 apple-touch-icon.png of 1111.com.tw is another interesting case: this is a white picture.

1111.com.tw, 1194x687 pixels of zen and fullness
1111.com.tw, 1194×687 pixels of zen and fullness

12 sites are impacted by this issue and 3 others were probably tricked during the creation of the icon. There is a difference of 1 pixel between their width and height. For example, the picture of HTCMania is 56×57. So close.

Small is beautiful. Sometimes.

Some sites have really big icons and some others take the opposite path. 7 sites have a 32×32 picture, among them Media.net and ADSLGate. Zillow and 4 others are 16×16. Duowan.com’s is only 8×8.

Pixel art maybe?
Pixel art maybe?

No less than 26 sites, such as AOL and NBCSports, choose a radical approach: the 1×1 icon. It reminds me of the old times, when complex HTML designs were made of stretched transparent 1×1 GIF pics. Except that such setting does not make any sense for apple-touch-icon.png. Note that some of these sites are a bit tricky. AOL, for example, also declares valid Apple touch icons. As a consequence, iOS visitors do not hear about the strange 1×1 picture.

4G recommended

Resolution is one thing, file size is another. The studied icons weigh 8.5KB on average, but some pictures are way larger. Yelp’s icon is 91KB, which is a lot when you consider that it is 57×57.

91KB, 57x57 Yelp icon
91KB, 57×57 Yelp icon

Addic7ed doubles this figure with its fancy 198KB, 1341×1609 icon. Very strange design by the way.

Addic7ed's... icon
Addic7ed’s… icon
Addic7ed's icon with iOS best effort
Addic7ed’s icon with iOS best effort

The winner in this category is ClipHunter with its 631KB icon! Sure, the drawing deserves all its bits (not safe for work, really).

But the most disappointing icon is probably Apple’s. With 96KB, the message is clear: buy an iPhone 5 and upgrade your plan to 4G.

Conclusion

Among the apple-touch-icon.png pictures that follow the dimensions of Apple specifications, 85% of them stick to the old versions of iOS. Only 15% follow iOS 7, released 6 months ago. Apparently, webmasters are not in a hurry to update them.

made with ChartBoot

The overall results are positive, with only 32% of picture with undocumented dimensions. Even if these dimensions are sometimes surprising, most of them are processed correctly by iOS. Yet some sites should definitely update their icons.

made with ChartBoot

Maybe the most striking figure is the amount of different sizes encountered during this study: 60 different resolutions were found, from the popular 57×57 to the unique 110×110 of the NCAA. This number reveals how fragmented the information is. 57×57 is still broadly advertised. 114×114 has its fans. 129×129 was popular for a while…

When creating an Apple touch icon, you should use an up-to-date favicon generator (and now let’s see if auto-promotion is efficient). You probably don’t bother checking Apple specifications every so often. Fortunately, some people do it for you. To make sure your favicon stays relevant, you can follow us (Twitter, Google+ or Facebook) to be notified when the generated pictures and code are updated.

Favicon update is still unpractical. You can expect more in the next few weeks… stay tuned!

Methodology

The apple-touch-icon.png picture is famous but not required to enable the Apple touch icon. There are actually four ways to display this icon:

  • HTML declaration. For example, <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
  • Dimension-specific pictures, such as apple-touch-icon-76x76.png
  • Precomposed touch icons (eg. apple-touch-icon-precomposed.png)
  • apple-touch-icon.png

As a consequence, when a web site as no apple-touch-icon.png or this picture is somewhat wrong, it may still support the Apple touch icon successfully. For example, by providing alternative pictures declared in the HTML code.

To collect data, some portions of the favicon checker were reused. The script parsed the Alexa top web sites listing and requested each site using an iPad Mini user agent to make sure it gets the mobile version of the site. Then, it tried to download apple-touch-icon.png and get its dimensions. All failures were ignored. For example, when the file is not present, some sites do not return a plain 404 error but an error page. The script failed at parsing such “picture”, yet this case was not distinguished from genuine corrupted pictures.

The 129×129 dimension, used by 49 sites, is a bit special. Apparently, it has been the dimension of the apple-touch-icon.png of Apple for a while, making it somehow “official”. Yet, I chose to consider it as non-official since there is apparently no reason for such resolution.

Oh, and in case you wonder, yes, I cleared my browser history at the end of this study. Thank you for reminding me.

What is the best scaling algorithm? You choose!

Generating a favicon for all platforms is a lot a matter of resizing a big picture to smaller sizes. Submit a 1000×1000 picture to RealFaviconGenerator and it will scale it to 16×16, 32×32, 152×152… and many other dimensions.

At first, I was pleased by the Mitchell algorithm. This is the default algorithm of ImageMagick, the tool used by RFG to perform image manipulation. A few weeks ago, Mazyad Alabduljaleel, an iOS developer, submitted his own picture and the result was not that great.

The Mitchell algorithm tends to blur the original image in order to smooth the edges. This is usually a good thing and thus makes Mitchell a good default choice. However, Mazyad’s picture was a pixel art design, where angles are a desired feature. And RFG does its best to lessen them. Oops!

Nearest Neighbor was the right solution for this picture. Different images, different scaling algorithms.

What is the best scaling algorithm? It depends.
What is the best scaling algorithm? It depends.

RFG does not pretend to know the right answer anymore. Although it still offers Mitchell by default, you can now pick the algorithm that fits your picture best. That was issue31.

You picture, your choice
You picture, your choice

ImageMagick offers something like 40 algorithms. I did by best to select the most relevant ones in order to not overwhelm the regular user with too many choices. However, I may have overlooked important ones. Please drop a comment whenever you feel something is missing.

What’s next? Vector graphics support and maybe vectorization of bitmap pictures for better scaling results.