iOS Safari Web Apps Templates and HowTos

August 14, 2012 | By

An iOS web application uses HTML/CSS/JS to deliver a iOS experience that looks and behaves like a native iOS application. If done correctly, the user can’t tell that it’s not a “normal” app. Although the capabilities are limited, it can be a great solution for many apps where going through the normal iOS app store is overkill or not practical.

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 its 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.

I created templates that show the proper use of apple-mobile-web-app-capable, apple-touch-icon, apple-touch-startup-image and how to use them with everything from an iPhone 3Gs, iPhone 4/4s, 5, iPad 1, iPad 2, iPad Retina, etc.

You can find everything you need including working samples at

Updated October 28, 2013 for iPhone 5


Filed in: HTML5, iOS/iPhone/iPad, JavaScript, PhoneGap | Tags: , , , , , , , , ,

About the Author (Author Profile)

Greg is a developer advocate for the Google Cloud Platform based in San Francisco, California
  • nice work bro,.thanks.

  • Dore Salazar

    Hi, I’m having a problem… I’m noticing something called “WebApp1” when I go to Settings, Cellular, Use Cellular Data For… Is there like it was an application but it doesn’t show any icon. I don’t have anything called “WebApp1” on my phone, I assumed is hidden and it’s driving me crazy… I wanna know how to delete. I reset my phone already, I even restored a backup I made this morning.
    I wanna know how to fix this, I have been reading around and I can’t find the solution to my problem anywhere, I don’t have WebApps made in Safari using the option “Add To Home Screen”…

    Please help!!