iPhone bookmark iconage
If you’re wondering how to control the icon that gets generated for your webpage with the new 1.1.3 iPhone release, look no further than Apple’s iPhone Dev Center.
Apple has added a section called “Create a WebClip Bookmark Icon” and it calls for a 57x57 pixel icon. After some testing today I’ve concluded this recommended sizing results in a fuzzy icon, largely due to the iPhone being a 163 ppi display.
Instead of sticking with the recommended sizing I bumped it up to 158x158. When this gets scaled you’ll be left with a crisp icon that sits nicely amongst Apples crisp icons. Onward.
Comments
Scott Johnson http://full-speed.org/
That link on the iPhone dev center will certainly be one of the more popular links this week. I know I was certainly happy to find that one earlier today.
And thanks for the tip on the icon size. Your icon for this site does look quite a bit less fuzzy than the 57x57 icon that I threw together this afternoon. I’ll try your resolution next, and hopefully my icon will be as crisp.
Elliot Jay Stocks http://elliotjaystocks.com
Cheers for this, Nathan - very handy indeed.
Nathan Borror http://www.playgroundblues.com
I guess I should point out why I chose the somewhat arbitrary dimensions of 158x158. I thought the iPhone screen was 200ppi so I upped the resolution of my 57x57 icon and it scaled the size to 158x158. When I went to write this post I learned the actual resolution was 163ppi. So you could fiddle with the size a little to get the same effect.
Fubiz http://www.fubiz.net
Thanks for the tip!
Pat
I don’t quite understand why you chose 158x158. iPhone icons are 59x60, so I could see how 57x57 icons are stretched and fuzzy, but why not just use a 60x60 icon?
Nathan Borror http://www.playgroundblues.com
@Pat - Good question. I think we were just going off the recommended sizing Apple suggests on its iPhone Dev Center. Going the 60x60 might be the sweet spot for crisp icons.
Joseph Wain
The sweet spot would be the exact number of pixels that the icon actually takes up on the screen – is it literally 57px when displayed? Does Apple recommend 57 pixels and then scale the bitmap up to 158?
Ryan Pitts
Just for fun I did two versions of a touch icon off the same source image. You can load them up side by side if you’re interested:
This page has a WebClip icon at 158x158, 72ppi
This page has a WebClip icon at 60x60, 163ppi
I can’t detect a ton of difference, although that might be just because of the source image I used. If anything, the 163ppi version seems like it might be a touch crisper.
Nathan Borror http://www.playgroundblues.com
@Joseph - It can’t be 57px because it results in a blurry image. Like I said above, 158px is an arbitrary size I chose that gets resized by the iPhone.
I think the point is to make it a little bigger than recommended and rely on the iPhones downsizing to get a sharper image than the recommended 57x57 pixel icon.
Ryan
Must have had some stray code in this comment before — going to repost here …
I created a couple of comparison WebClip icons from the same source image, so if you’re curious you can load them up side by side:
158x158, 72ppi http://www.spokesmanreview.com/mobile/zags/158-test/
60x60, 163ppi http://www.spokesmanreview.com/mobile/zags/
I can’t really see much difference — if anything the 163ppi might look a little better to me I guess.
Douglas Vincent http://www.douglasvincent.com
At 163 dpi you’re looking at a 129x129 pixel file in Photoshop. I made a test using text on my website which looks pretty good.
Nathan Borror http://www.playgroundblues.com
I’d like to reiterate in the comments what I’ve added to the post above. 60x60 at 72dpi is the recommended size for these icons. Thanks for everyones input on this. Hopefully Apple will revise their docs.
Nathan Borror http://www.playgroundblues.com
I love how there is a slight possibility that this post may have influenced the internet elves at Apple to create this —> http://www.apple.com/apple-touch-icon.png
Marcus
I built an icon size test page that makes it easy to try different icon sizes interactively. Far as I can see, 60x60 is as close to native as it gets: http://marcus.bointon.com/archives/52-iPhone-icon-test-ge…
Allister
Am I missing the point here? Why does DPI even matter in this case?
There are 57 pixels (according to Apple) available in each dimension. Period. If your original image has 129 pixels in each direction, it will be scaled by a factor of 0.44186 (roughly). End.
DPI/PPI only come into play when you are creating an output at a fixed real size and only makes sense when you’re not constricting that size.
Nathan Borror http://www.playgroundblues.com
@Allister - You’re correct on the DPI subject. If you’ll read some of the comments above you’ll see we’ve discovered that 57x57 results in a blurred icon, but if you make the size a few pixels larger like 60x60 the icon will appear crisp.
Yvan256 http://www.yvan256.net
I just took the last hour or so to do tests with icons from 48x48 to 64x64, with both horizontal and vertical lines, and here are my results:
However, making a 59x60 pixels icon doesn’t work, I tried with a grid and there was resizing (i.e. I ended up with a gray horizontal bar in the middle). You can’t have a pixel-perfect icon, at least not with the current firmware.
Also, please note that the icon gets cut on all sides (if using a 59x60 icon): - you lose 1 pixels at the top - you lose 1 pixels on the right - you lose 4 pixels at the bottom - you lose 1 pixels on the left
Please note, for your top padding, that the iPhone/iPod touch also adds a 1-pixel high white line at the top along with the other modifications.
This means we should use a 57x55 icon, top aligned with a 1 pixel padding, inside a 59x60 graphic.