How iOS scales the Apple Touch icon

TL; DR

When iOS Safari encounters an Apple Touch icon too large for the screen, it scales it down. Which scaling algorithm does iOS use for this task? It's not clear. Maybe something close to Lanczos2. The main issue is when the icon requires a particular algorithm, such as Nearest Neighbor: iOS doesn't exactly produce the expected result. But it's no big deal.

What is the problem?

There are a lot of Apple Touch icons, ranging from 57x57 to 180x180. If you really want the full story, you can generate up to almost 20 icons! However, when an icon is missing, that's not a blocking issue. iOS scales the icon down.

As suggested by several users and "summarized" in issue #211, it would be great to generate only one Touch icon (or only a few ones) and let the devices do the scaling. Issue solved, right?

Not so fast. There is one tiny question to answer before dropping almost redundant 20 icons: how good is iOS at resizing pictures?

Finding iOS scaling algorithm

The methodology:

  • Create a sample 180x180 icon with a diagonal line in it: 180x180_icon.png
  • Push this image in a web site and add it to the home screen of my iPad Mini running iOS 9: 180x180_icon_added_to_homescreen.png Here, iOS resizes the pic to 76x76.
  • Crop the rounded corners to remove all traces of background: 180x180_icon_added_to_homescreen_and_cropped.png
  • For each algorithm supported by ImageMagick (come on, more than 40!), repeat the same steps with Image Magick commands (ie. scale with the tested algorithm and crop the result), then compare iOS and ImageMagick.

And the result is... iOS doesn't use any of the algorithms offered by ImageMagick. After studying the results returned by the ImageMagick's compare command, this is apparently close to Lanczos2. But it's not exactly the same. In other words, iOS applies a small anti-aliasing effect. Most of the times this is just fine.

manual_comparison-300x270.png

Small issue with specific Apple Touch icons

Some images require a specific scaling algorithm. For example, you don't want the classic scaling with pixel art pictures. Quite the contrary, you want to retain the pixelization. In this case, iOS doesn't do what you want.

When we zoom the icons, there is clearly a difference:

On the left, a 180x180 icon scaled down by iOS. On the right, a 76x76 icon prepared with RFG and the Nearest Neighbor alforithm.

Yet, at normal scale, it's nearly not visible. I frankly can't see the difference between the two:

On the left, a 180x180 icon scaled down by iOS. On the right, a 76x76 icon prepared with RFG and the Nearest Neighbor alforithm.

Conclusion

If you are careful enough to pick a particular scaling algorithm when generating your icons (eg. Nearest Neighbor), then you might want to keep all the icons to make sure your visitors really get the icon you want. Else, you can safely drop smaller icons. iOS will do just well.