Summary: When clipping a web app to the home screen, iOS will render the icon differently (blurry) depending on whether the web app uses the 'apple-mobile-web-app-capable' meta tag (meta tag is used to hide the Safari browser chrome and run the app full screen).
If the web app does not use this meta tag, the icon will render properly after it is clipped to the homescreen; if the web app does, it will render improperly (or more specifically it will be blurry) when clipped to the homescreen.
Steps to Reproduce:
1. Develop a web app using the 'apple-mobile-web-app-capable' meta tag in order to allow the app to launch full screen.
2. Visit the web app from an iOS device like iPhone 4.
3. Clip said web app to the home screen (in order that it will launch in full screen mode).
4. The icon will appear in its proper high resolution during the preview phase (where you can change the title of the web app); however, when it is placed on the home screen it renders the icon incorrectly (it renders blurry).
Expected Results: I would expect iOS to render 'apple-mobile-web-app-capable' icons the same as web pages that are not specifically set to render in full screen (i.e. pages coded without the 'apple-mobile-web-app-capable' meta tag.
Actual Results: Web apps that use the 'apple-mobile-web-capable' meta tag have their icons rendered blurry by iOS when they are clipped to the home screen. I cannot tell whether the problem occurs on non-Retina Display devices (or devices where the native resolution is lower).
Regression: I believe the problem occurs on all iOS versions and hardware configurations (i.e. the 3GS); however, it is not visible on non-Retina Display devices because the resolution is too low. It is clearly visible on iPhone 4 due to the Retina Display.
Notes:
1. Documented by WaltPad:
http://blog.iwalt.com/2010/06/ios-4...g.html?cid=6a00d834558d7c69e2013485f95a18970c
2. Posted on the Apple Discussion Forums:
http://discussions.apple.com/thread.jspa?threadID=2555729&stqc=true
3. A real-world example of the bug:
http://cl.ly/1wWe the left icon is rendered without using the 'apple-mobile-web-capable' meta tag in the web app's HTML code; the right icon is rendered with the 'apple-mobile-web-capable' meta tag - the result is a blurry icon. Note: both icons are rendered from the same 512x512 icon.
4. The resolution of the source icon does not have an affect on the clarity of the rendered icon.
5. Using the apple-touch-icon-precomposed.png feature (to inhibit iOS from glossing the icon) has no affect on the clarity of the icon and does not resolve the bug.