Step 6 To create an installable web app we need a few extra assets on top of the website itself. First of all, we’re going to want an icon that sits on the iPad’s springboard homescreen to act as the launch button for our app.

Create an icon 57 x 57 pixels and save it as a 24-bit PNG file with the filename apple-touch-icon.png. You don’t need to add rounded corners or the highlight effect as the iPad OS will do this for you (unless you specifically ask it not to through an additional metatag). Add the code below to link your iPad icon to your website:


Step 7 Similarly we can have a startup screen for our app. This is entirely optional – the application will work just fine without it, but a startup screen adds a nice bit of additional polish to the final portfolio, especially if you let your potential client launch the app themselves.

Create a splashscreen image 1,004 pixels tall and 768 pixels wide. Save it as a 24-bit PNG file with the filename splashpage.png. Add the code below to your section of the website homepage to enable it as the startup image:


Step 8 We need to tell the iPad that your website can be installed as an application. This is easily done by adding another special HTML metatag to the top of each page. Add the following code inside your section to enable installation and match the viewport to the iPad’s resolution:

    content=”yes” />
    scalable=no, width=device-width, initial-scale=1.0,
    style” content=”black” />