Photoshop user? Why not RealFaviconGenerator?

Photoshop is a great tool. Use it and you can expect your pictures to be just perfect. Well, almost perfect.

Let’s see what Apple got when they created their own Touch icon:

$ wget -o apple-icon.png http://www.apple.com/apple-touch-icon.png
$ ls -l
-rw-rw-r-- 1 philippe philippe 4506 Aug 12  2015 apple-icon.png

4506 bytes for a Touch icon? Sounds legit. Now let’s have a look to its metadata:

$ exiftool apple-icon.png
ExifTool Version Number         : 9.46
File Name                       : apple-icon.png
Directory                       : .
File Size                       : 4.4 kB
File Modification Date/Time     : 2015:08:12 19:51:29+02:00
File Access Date/Time           : 2016:05:17 17:00:31+02:00
File Inode Change Date/Time     : 2016:05:17 17:00:31+02:00
File Permissions                : rw-rw-r--
File Type                       : PNG
MIME Type                       : image/png
Image Width                     : 152
Image Height                    : 152
Bit Depth                       : 8
Color Type                      : RGB
Compression                     : Deflate/Inflate
Filter                          : Adaptive
Interlace                       : Adam7 Interlace
Software                        : Adobe ImageReady
XMP Toolkit                     : Adobe XMP Core 5.5-c021 79.155772, 2014/01/13-19:44:00
Original Document ID            : xmp.did:15d8a979-1097-4474-accc-90fc2b02fc58
Document ID                     : xmp.did:25F46708355311E580E8DA1A4BE6CE82
Instance ID                     : xmp.iid:25F46707355311E580E8DA1A4BE6CE82
Creator Tool                    : Adobe Photoshop CC 2014 (Macintosh)
Derived From Instance ID        : xmp.iid:d4dcd418-cd4f-4a8e-a9eb-670e43ff2ee8
Derived From Document ID        : adobe:docid:photoshop:3a0c5b59-7dbd-1178-bb27-91c7aa683e3f
Image Size                      : 152x152

Apparently, this icon was generated by Photoshop.

These are a lot of information… What happens if we remove all EXIF data?

$ exiftool -all= -o apple-icon-no-exif.png apple-icon.png
$ ls -l
-rw-rw-r-- 1 philippe philippe 3555 May 17 17:04 apple-icon-no-exif.png
-rw-rw-r-- 1 philippe philippe 4506 Aug 12  2015 apple-icon.png

We’ve just decreased the size of the Apple Touch icon by more than 20% just by removing the metadata!

Now let’s do the same of, say, the Alphabet Touch icon, wisely generated by RealFaviconGenerator:

$ wget -O alphabet-icon.png https://abc.xyz/apple-touch-icon-152x152.png
$ exiftool -all= -o alphabet-icon-no-exif.png alphabet-icon.png
$ ls -l
-rw-rw-r-- 1 philippe philippe 3714 May 17 17:09 alphabet-icon-no-exif.png
-rw-rw-r-- 1 philippe philippe 3714 Apr 21 05:17 alphabet-icon.png

(yep, we took the 152×152 version, because this is the size of Apple’s Touch icon)

Now, the image is 3.7KB, with or without EXIF, simply because RFG does not produce verbose metadata.

Okay, it’s not entirely Photoshop’s fault. It probably has options to not be that verbose. Plus you’re responsible of post-processing your assets before deploying them. But if Apple did the mistake, others probably made it too. But at least not RFG users.

How Android Chrome scales down icons

TL; DR

Android Chrome behaves almost like iOS: it scales down the icons correctly when it cannot find an icon that exactly matches its screen, producing excellent results using an algorithm similar to Blackman or Lanczos. Just mind special icons, such as pixel art icons that need a particular kind of algorithm such as Nearest Neighbor. But even in that case, Android Chrome offers a decent result.

The problem

The issue all explained here. Plus it’s always a concern when you try to reduce the amount of icons.

The test

I made a test with my old Galaxy S5. When Android Chrome is given a manifest declaring all documents icons for homescreen and splashscreen (9 icons, ranging from 36×36 to 512×512), it takes the 144×144 icon for the home screen and 384×384 icon for the splashscreen. Which is a good thing: as it is suggested to declare only two 192×192 and 512×512 icons, the Galaxy S5 is a good candidate to check the scale down in a real life situation.

For this test, I used this sample 512×512 icon and declared it, alone, in a manifest:

Android Chrome original 512x512 icon
Android Chrome original 512×512 icon

Here is what my Galaxy does with it:

Added to home screen : the icon is now 144x144
Added to home screen : the icon is now 144×144
Splash screen, the image is now 384x384
Splash screen, the image is now 384×384

In both cases, we can see that the results are great (despite of my suboptimal choice of theme and background colors).

As for iOS, I couldn’t find an exact match with any of the 40 algorithms provided by ImageMagick. The closest ones are Blackman, then Lanczos.

Visually, I can’t see any difference between what Chrome creates and the 512×512 icon resized to 144×144 by ImageMagick with Blackman and Lanczos:

visual_comparison

What about a pixel-art icon, one that shouldn’t be interpolated?

512x512, pixel art icon
512×512, pixel art icon

It’s okay, really:

A pixel art icon added to home screen
A pixel art icon added to home screen
Pixel art icon splashscreen
Pixel art icon splashscreen

As with iOS, you can spot differences between what you get and what you could expect by providing the icon with the right size (eg. 384×384 for splashscreen and my Galaxy S5) and scaled with the right algorithm (eg. Nearest Neighbor). But it’s no big deal.