Creating iOS web apps can be very error prone. The size requirements for icons and splash screens are odd and there are a few things that are non-obvious (e.g. the iPad landscape splash image is actually a portrait-shaped image but has it's contents rotated; Retina displays reserve 40 pixels for the status bar while non-retina reserve 20 pixels, etc.). Also, if you screw something up, you get no errors. It just simply doesn't work leaving you to guess/hack.
What started as a 15 minute attempt to get icons and splash screens working for my web app resulted in a couple of hours of what felt like pure hacking. Many of the online resources (including Apple's!) were out of date and didn't include information on handling iPad retina icons/images. I decided to share my results to hopefully spare others from the frustrating experience. Proper use of apple-touch-icon and apple-touch-startup-image is demonstrated in these samples.
Fun facts:
You can test webapp1 by pointing your iOS Safari browser to http://gregsramblings.com/webapp1, click the share button and select "Add to Home Screen". You should see the icon and you should see splash screens when you launch it.
You can test webapp2 by pointing your iOS Safari browser to http://gregsramblings.com/webapp2 - you should see a popup that points to the share button explaining how to add the app to the home screen.
more coming soon including offline support
Twitter - @gregsramblings