Overview
Adhering to the platform suggested app icon and image sizes/dimensions while keeping the file size low guarantees an enjoyable app user experience (images fit well to the screen). You may need to update your image/icon when:
- You found stretched, distorted, truncated, or even cropped app images such as the Home Background Image or Splash Screens.
- You try to upload an icon image, but the CSM does not upload it.
- You do not know the correct app icon/image size (in pixels/px).
- You noticed blank/white space in the app navigation menu icons.
Important: An image of around 100Kb (and definitely not more than 500kb) can be of very good quality.
For more information on selecting the appropriate image size principles, you can have a look at the Introduction to Aspect Fill and Ratio KB article.
Solution
<supportagent>Submitting various images per type of device is not a BiznessApps feature and should be elevated as a Feature Request if requested.</supportagent>
The recommended size for images and icons can be found within the CMS while building and publishing the app as shown in the screenshots below.
Additionally, below are some suggested dimensions in pixels/px for all app icons and image types so that your device (iPhone, Android, Tablet, and their various versions) can support them and best fit its screen.
1. Check the following table and according to your image type, select the suggested dimension for your device.
| Image Type | iphone 4/4S | Android and iPhone5 | iPhone6 onwards | Tablet |
| Banner Ads | 640x100px | 640x100px | 640x100px | 1536x100px |
| Bottom Navigation Bar (ex: Web Site Tab) | 640x88px | 640x88px | 750x88px | 1536x88px |
| Bottom Tab Bar (Food Ordering/Real Estate; see Figure B) | 640x98px | 640x98px | 750x98px | 1536x98px |
| Bottom & Top Tab Bars (all other tabs; see Figure A) | 640x88px | 640x88px | 750x88px | 1536x88px |
| Contact Tab (Left/Right) | 288x144px | 288x144px | 288x144px | 288x144px |
| Home Screen Buttons (Call Us/Directions/Tell Friend) | 190x60px | 190x60px | 190x60px | 434x76px |
| Home Screen Tab Height (Top or Bottom Layout) | 130px | 130px | 130px | 260px |
| Home Screen Tab Width (Left or Right Layout) | 160px | 160px | 160px | 320px |
| Home Screen Tab Icons | 75x75px | 75x75px | 75x75px | 134x134px |
| Home Screen Background Images | 640x960px | 640x1136px | 750x1334px | 1536x2048px |
| More Menu Tab Icons | 70x70px | 70x70px | 70x70px | 70x70px |
| Navigation Bar/Global Header (see Figure A) | 640x128px | 640x128px | 750x128px | 1536x128px |
| Splash Loading Screen | 640x960px | 640x1136px | 750x1334px | 1536x2048px |
| Status Bar | 640x40px | 640x40px | 750x40px | 1536x40px |
| Subtab Icons | 105x105px | 128x128px | 128x128px | 256x256px |
2. Check the Image Type: Background Images and select the suggested dimension for your device.
a. For the Tab Types in the below table, you will need to to subtract the Navigation Header height
| Tab Type | iPhone 4/4S | Android and iPhone5 | iPhone6 onwards | Tablet |
| Call Us | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Contact | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Direction View | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Email Form | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Email Photo | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Events v1 | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Events v2 | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Fan Wall v1 | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Golf Courses | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| GPS Coupons | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Image Gallery | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Info Tab (2-tier) | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Info Tab (3-tier) | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Loyalty | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Mailing List | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Menu | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Merchandise | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Messages | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Mortgage Calculator | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Music | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| 640x832px | 640x1008px | 750x1206px | 1536x1920px | |
| Podcast | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| QR Coupons | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| QR Scanner | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| RSS Feed | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Social | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Sports Stats | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Tell Friend | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Tip Calculator | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Voice Recording | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| Web Site | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
| YouTube Channel | 640x832px | 640x1008px | 750x1206px | 1536x1920px |
b. For the Tab Types in the below table, you will need to to subtract the Navigation Header height and the Top OR Bottom Tab Bar height
| Tab Type | iPhone 4/4S | Android and iPhone5 | iPhone 6 onwards | Tablet |
| Food Ordering | 640x832px | 640x920px | 750x1118px | 1536x1832px |
| News | 640x744px | 640x920px | 750x1118px | 1536x1832px |
| Reservation | 640x744px | 640x920px | 750x1118px | 1536x1832px |
c. For the Tab Types in the below table, you will need to to subtract the Navigation Header height and the Top and the Bottom Tab Bar height
| Tab Type | iPhone 4/4S | Android and iPhone5 | iPhone 6 onwards | Tablet |
| Around Us | 640x656px | 640x832px | 750x1030px | 1536x1744px |
| Fan Wall v2 | 640x646px | 640x822px | 750x1020px | 1536x1734px |
| Real Estate | 640x646px | 640x822px | 750x1020px | 1536x1734px |
3. Check the Image Type: Header Images and select the suggested dimension for your device.
| Tab Type | Phone | Tablet |
| Events v2 | 640x264px | 1536x634px |
| GPS Coupons | 640x264px | 1536x634px |
| Info (1-/2-/3-tier) | 640x264px | 1536x634px |
| Loyalty | 640x264px | 1536x634px |
| Music | 640x264px | 1536x634px |
| QR Coupons | 640x264px | 1536x634px |
| Reservation | 640x264px | 1536x634px |
4. Check the Image Type: Thumbnail Images and select the suggested dimension for your device.
| Tab Type | Phone | Tablet |
| Around Us | 140x140px | 140x140px |
| Golf Course | 140x140px | 140x140px |
| Image Gallery | 140x140px | 140x140px |
| Info (2-/3-tier) | 140x140px | 140x140px |
| Food Ordering | 600x600px | 600x600px |
| Loyalty | 140x140px | 140x140px |
| Mailing | 140x140px | 140x140px |
| Merchandise | 600x600px | 600x600px |
| Music | 200x200px | 200x200px |
| Real Estate | 140x140px | 140x140px |
| Reservation | 140x140px | 140x140px |
| RSS Feed | 140x140px | 140x140px |
| Web Site | 140x140px | 140x140px |
5. Check the Image Type: Gallery Images and select the suggested dimension for your device. (These are the optimum sizes for each device type. You cannot upload device-specific gallery images.)
| Tab Type | Recommended Aspect Ratio | iPhone 4/4S |
Android and iPhone5 |
iPhone 6 onwards | Tablet |
| Events v2 | 9:16 | 640x960px | 640x1136px | 750x1334px | 1536x2048px |
| Golf Course (Hole Map) | 1:1.83 | 640x350px | 640x350px | 750x410px | 1536x722px |
| Image Gallery | 9:16 | 640x960px | 640x1136px | 750x1334px | 1536x2048px |
| Real Estate | 9:16 | 640x960px | 640x1136px | 750x1334px | 1536x2048px |
Picture References
Figure A:
Figure B:
Back to the top
Testing
The images selected will be perfectly proportioned on your device when using the app and will be appealing to the app users. There will be no distortion or clipping and all the information will be in bounds and nicely shown on the device.
Comments
1 comment
Please update it to the latest iPhone versions
Please sign in to leave a comment.