Under The Bridge

So the first thing a new iPhone blog needs is a catchy icon for when a webclip of it is put on the Springboard, which no doubt anyone who reads this will be doing immediately. Thus, today let’s experiment with that process.

We start out by selecting possible source graphic assets, namely these portraits of the Troll done (from life, naturally) by fantasy artist extraordinare Toren Atkinson back in the day before he got all professional:

and what we’ll be ending up with is a 57×57 icon on the iPhone’s Springboard.

The mechanics are straightforward: we place a PNG file named “apple-touch-icon.png” at our site’s root for a default, and and override links can be placed in specific pages’ code, says Apple’s Safari Web Content documentation. In addition, the iPhone HIG for Web Applications says that the image should measure “57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone 1.1.3 scales it)”.

Thing is, the HIG? It lies.

As you’ll find out if you read around the web at all, the iPhone scales your image even if it does match the above specs as it rounds the corners and shines it up, and there are wildly varying recommendations on what the best size actually is. Indeed, if we look at what you’d kinda think ought to be the canonically correct example, the apple-touch-icon.png file at www.apple.com, we see that it is, indeed, not 57 x 57 pixels; it is 129 x 129 pixels.

Given that, we figured we’d just toss the above Illustrator rasterizations (which are 269 x 560 pixels and 372 x 380 pixels respectively, with a full alpha channel) onto the site as the apple-touch-icon images and see what happened. The squarish head image got scaled down more or less as expected; but, interestingly, the full standing trollsheep image got cut off at about waist height. So it’s not just scale the source file down into a 57 x 57 square, there’s some more complicated top-fit-to-width kind of jiggery going on. In addition, the alpha appeared to be applied to a black background before the sheen was applied. 

We checked that was indeed the case by making black-backgrounded versions, and as you can see below, it does indeed appear that a PNG with alpha channels produces precisely the same result as that PNG composited to black and the alpha channels removed. Next, we tried them with the same color grey background that Apple uses itself; then with white to match the line art motif of our sources; and then with green, red, magenta and orange, just for grins. And here are the results:

For now, we’ve decided to go to with the head on white background. We added 30 pixels space around each edge to move it away from the icon edges a little, as you can see here, and you can go ahead and add this page to your Springboard right now to see how that ends up looking on your iPhone!