Adding an App Icon and Startup Image

Contents

1. A First Impression

A positive first impression for your application starts with a good looking application icon and startup image. The application icon is the image that appears on your device’s home screen and what the user taps to launch the application. The startup image is a full screen image that is displayed while the application is loading.

    

Back to Contents

2. Image Formats and Best Practices

iOS Application Icon Formats

The application icon appears on the device home screen. Following are the standard formats supported by iPhone, iTouch and iPad devices:

The recommended image format is 24-bit PNG with no transparency. Apple mobile devices automatically enhance application images by adding rounded corners, a drop shadow and a glossy overlay. For your application image to appear at its best on the device home screen, it should conform to these rules:

• fill the prescribed image space
• have square 90 degree corners
• must not use alpha transparency

iOS Startup Image Formats

The recommended image format is 24 bit, PNG with no transparency.

  

Back to Contents

3. Configuring the App Icon and Startup Image

The application icon and startup image are properties of the Visual Designer Form in Design Center. To access the Design Form properties, select the blue striped default page background. Or, open the Outline view, and select the top item in the list. See Using the Outline View for more information.

With the Design Form selected, open the Properties view by selecting Window>Show View>Properties from the menu. Specify your icon and startup screen image files in the Application Icon and Startup Image fields.

Back to Contents

4. Adding the App Icon to the Home Screen

When you view the app on your phone, use your phone's menu to add the app icon to your home screen by tapping the Open Action icon.

    

When you tap Add to Home Screen on the phone menu, a screen appears allowing you to name the icon. Tap the Add button to add the icon to your home screen. When you tap the icon, the startup image appears, and then the app opens.

Back to Contents

5. Resources

iOS Human Interface Guidelines - Custom Icon and Image Guidelines

Safari Web Content Guide - Configuring Web Applications

MobiOne MyCo Demo Application Images and Designs myco-src.zip, 134K

Back to Contents

6. Where Do I Learn More about MobiOne Studio?

The MobiOne online Learning Center site provides documents, tips, tutorials and videos to help answer your questions. Remember to check the Learning Center site for new and updated material.