Mobile app development for iOS

The startup image for the Jawbone UP app.One of the most important things to do when optimizing your web app for iOS is to set the launcher icon. This is the icon that will be displayed on the home screen of the user’s device. If you don’t set this yourself, iOS will use a screenshot of the page instead.

You can specify the launcher icon by adding a element to the of your document. Make sure that you set the rel attribute on this element to apple-touch-icon.

Your icon image should be supplied in PNG format.

As Apple hardware has evolved we’ve seen the introduction of new screen sizes and densities. This means that you cannot create a single icon that will be displayed nicely on all Apple devices.Launcher Icon Instead you need to create icons that specifically target devices with retina and non-retina screens.

You can specify icons aimed at particular device resolutions by adding multiple elements with sizes attributes. This attribute should contain the size of the icon referenced in the href attribute. Safari will pick out the icon that is most appropriate to the user’s device.

The icon sizes needed to target specific devices can be found in the table below. If you don’t specify a sizes attribute, the default size of 60x60 will be used.

Browser UI Comparison: Visible (left) and Hidden (right).60×60 iPhone & iPod Touch (Non-Retina)
76×76 iPad 2 & iPad mini (Non-Retina)
120×120 iPhone & iPod Touch (Retina)
152×152 iPad & iPad mini (Retina)

Note: Safari on iOS 7 doesn’t add any effects to your icons, however older versions of Safari will. If you don’t want older versions of Safari to apply effects to your icons make sure that the filenames end with -precomposed.png.

Setting a Startup Image

Next up you’re going to learn how to add a startup image for your app. This will be displayed to the user whilst the page is loading. If you don’t specify a startup image the user will just see a blank white screen.


You might also like

Useful tips for an enterprise mobile app development company  — WhaTech
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

Q&A

avatar
Do You Need to Develop a Mobile App for Your Business?

Mobile apps are today part of every conceivable business, irrespective of their size or services they offer. Apps are the best way to keep your customers engaged with your product - they act like gentle reminders to pull them back to your product of service, while also generating new customers in the process. However, are mobile apps really necessary for each and every business? Do you particularly need one to promote your brand or business? Read on to find out the answer to your question….