I had a few quiet days this week so I thought I’d have a play about with giving SciCombinator it’s own iOS icon and make it feel a little more like a first class iOS app. This turned out to be pretty simple to be honest; here’s the steps involved and the small amount of code needed…
First up, icons. Generate your app icon in the following sizes (in pixels):
- 57x57 - non-retina iPhone and iPod Touch
- 72x72 - non-retina iPad
- 114x114 - retina iPhones and iPad mini
- 144x144 - for the iPads 3 & 4
No need to make them look like actual iOS icons - iOS can apply the rounded corner and reflection effects for you (unless you want a really specific look for your icons, then go ahead). I just made nice, flat, square images…
Save these icons into your app/site so that they’ll get served up, and then add the following tags into your site header:
The important thing to note here is the “sizes” attribute - this lets iOS (mobile safari)
know which icon to use for the best look. Also, if you don’t want iOS to apply the
rounded corners and reflection to your icon, you can set the “rel” attribute to
apple-touch-icon-precomposed” - this will tell iOS leave them as they are.
Just below these link tags, add the following meta tags:
These tell mobile safari the following:
- This website can be run in “standalone” mode - with no mobile safari chrome
- Set the colour of the iOS status bar (the top) to black
- Do not attempt detect telephone numbers on the page (unless this is appropriate for your site)
See here for more information on the various meta tags you can pass into mobile safari.
This is all you need to do to get your website/app to behave almost like a standalone app on iOS. Now for the final wrinkle… If you open up your site in standalone mode from your glorious new homepage icon, every link you touch; be it internal, or external to your site will open up in mobile safari rather than staying within your app.
And that’s all there is to it!