HTML and CSS Reference
In-Depth Information
WARNING
Make sure you use the exact image sizes and rotations as described in the preceding comments.
If you don't specify a startup image, by default, the user sees an image of the last state that your game was
in when it was last closed.
Configuring Home Icons
The devil, as some say, is in the details. The last touch you can add to your game to make it appear just like
a real native app is to add a
<link>
tag specifying a custom home screen icon. At its simplest, you can add
this icon by specifying a
<link>
tag with an
"apple-touch-icon"
relation that points to a 57 × 57 pixel
PNG image:
<link rel="apple-touch-icon" href="/path/to/57x57-icon-image.png" />
This image shouldn't have any of the standard iOS icon embellishments, but rather should just be a square
icon image. iOS can add the rounded corners and the gloss finish if you use this version of the meta tag.
Using this version, though, can leave Android users with a subpar experience, however, because Android
won't add the additional enhancements to the image. To fix this, you can use a “precomposed” icon that has
already been tricked-out in glossy style by specifying:
<link rel="apple-touch-icon-precomposed" href="/path/to/
57x57-precomposed-
icon-image.png" />
To accommodate the iPad and the iPhones with a Retina display, adding a triumvirate of icons with the sizes
set explicitly does the trick:
<!-- 72x72 for iPad -->
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="/path/to/72x72-icon-image.png" />
<!-- 114x114 for Retina Display on iPhone 4 and up -->
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="/path/to/114x114-icon-image.png" />
<!-- 57x57 for iPhone pre iPhone 4 and iPod Touch, Android 2.1+ -->
<link rel="apple-touch-icon-precomposed" sizes="57x57"
href="/path/to/57x57-icon-image.png" />
Much like the
favicon.ico
file, iOS can search for a files with some variation of
"apple-touch-
icon.png"
in the root of your site and use those automatically, but you should explicitly let the device know
what icons are available.
