Skip to main content

App Icons on iPad and iPhone

Below are guidelines for handling icon files for iPhone-only apps, iPad-only apps, and universal apps.

Name Size (pixels) Platform
Icon.png 57 x 57 Universial application icon
Icon-settings.png 29 x 29 Universial application icon for settings area. Alternative name: Icon-Small.png
Icon~ipad.png 72 x 72 iPad application icon. Alternative name: Icon-72.png Add some smaller (iPad doc: 64×64, other optional 32×32, 24×24, 16×16) custom icons to your project. See comments.
Icon-spot~ipad.png 50 x 50 iPad icon for spotlight search. Alternative name: Icon-Small-50.png iPhone OS trims 1 pixel from each side and adds a drop shadow. The actual size is 48×48 pixels.
iTunesArtwork.png 512 x 512 Universial application icon for iTunes App Store. Uploaded separately to iTunes. It’s included in the app bundle too, file name: iTunesArtwork. In an iPad application iPhone OS uses this image to generate the large (320×320) document icon if it is not supplied otherwise.
Default.png 320 (w) x 480 (h) iPhone/iPod 2, 3 portrait launch image
Default@2x.png 640 (w) x 960 (h) iPhone 4 hi-res portrait launch image
Default~ipad.png 768 (w) x 1004 (h) iPad. Specifies the default portrait launch image. This image is used if a more specific image is not available. Use full size template (768×1024) to design this launch image. The 20 pixels height statusbar is on by default and occupies the top of the screen, aka the 1004 rows vs. 1024.
Optional icons and images:
Icon@2x.png 114 x 114 iPhone 4 hi-res application icon
Icon-settings@2x.png 58 x 58 iPhone 4 hi-res application icon for settings/search area
Icon-doc.png 22 (w) x 29 (h) Universial document icon
Icon-doc@2x.png 44 (w) x 58 (h) iPhone 4 hi-res document icon
Icon-doc~ipad.png 64 x 64 iPad document icon (small)
Icon-doc320~ipad.png 320 x 320 iPad document icon (large)
Background-xxx.png 320 (w) x 480 (h)
640 (w) x 960 (h)
768 (w) x 1024 (h)		 iPhone/iPod Touch 2, 3 background image,
iPhone 4 background image, full size
iPad background image, full size. For most projects the status bar is hidden, so use full screen size by default.
Default-PortraitUpsideDown~ipad.png 768 (w) x 1004 (h) iPad. Specifies an upside-down portrait version of the launch image. The height of this image should be 1004 pixels and the width should be 768. This file takes precedence over the Default-Portrait.png image file for this specific orientation.
Default-LandscapeLeft~ipad.png 1024 (w) x 748 (h) iPad. Specifies a left-oriented landscape version of the launch image. The height of this image should be 748 pixels and the width should be 1024. This file takes precedence over the Default-Landscape.png image file for this specific orientation.
Default-LandscapeRight~ipad.png 1024 (w) x 748 (h) iPad. Specifies a right-oriented landscape version of the launch image. The height of this image should be 748 pixels and the width should be 1024. This file takes precedence over the Default-Landscape.png image file for this specific orientation.
Default-Portrait~ipad.png 768 (w) x 1004 (h) iPad. Specifies the generic portrait version of the launch image. The height of this image should be 1004 pixels and the width should be 768. This image is used for right side-up portrait orientations and takes precedence over the Default~ipad.png image file. If a Default-PortraitUpsideDown.png image file is not specified, this file is also used for upside-down portrait orientations as well.
Default-Landscape~ipad.png 1024 (w) x 748 (h) iPad. Specifies the generic landscape version of the launch image. The height of this image should be 748 pixels and the width should be 1024. If a Default-LandscapeLet.png or Default-LandscapeRight.png image file is not specified, this image is used instead. This image takes precedence over the Default.png image file.


There is a complete list found here:
Oops Tech Blog

Except for iTunesArtWork icon, list the names of each of these files in the Icon files entry in the Info.plist.
App Icons on iPad and iPhone
Drawing and Printing Guide for iOS
Custom Icon and Image Creation Guidelines

Comments

Post a Comment

Most Favorite Posts

TechLead: React Native vs Flutter vs WebView - Hybrid Mobile App Development for 2018

Topics covered: Xamarin, Cordova, Flutter, Titanium, React Native, Flutter React Native Web Views Native Development: iOS and Android Types of apps: Fully native high interactivity expensive: iOS and Android high interactivity, personalization, performance worth for top 50 apps less and less apps are installed you need to shine to be discovered user picks only best app among similar featured apps Hybrid Technologies Xamarin, Cordova, Flutter, Titanium, React Native, Flutter Be aware of the maturity lock-in effect infrastructure and tooling required might get worst of both world should be incrementable updatable check where it makes sense WebViews only Native App shells: Amazon App, Apple App Store, WeChat Mainly for smaller companies Trending on Google Links: AirBnB is sunsetting its React Native development What’s Next for Mobile at Airbnb Server-Driven Rendering Even though we’re not using React Native, we still see the val...
1 comment
Read more

Dark Theme (Dark Mode) in Android WebViews, WKWebViews and CSS

So your apps just implemented a shiny new dark theme and it’s looking 👌 There are lots of benefits to having a dark theme in your application, and having it consistent throughout your application allows for a great user experience. But what happens when the the user runs into a WebView in your app? Support: if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { ... } Set: WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON) Current setting: val forceDarkMode = WebSettingsCompat.getForceDark(webView.settings) Joe Birch Assuming your question is asking how to change the colors of the HTML content you are displaying in a WKWebView based on whether light or dark mode is in effect, there is nothing you do in your app's code. All changes need to be in the CSS being used by your HTML content. CSS dark mode via :root variables, explicit colors and @media query: :root {     color-scheme: light dark;      ...
Post a Comment
Read more

App Performance Monitoring

AppDynamics Real-time performance monitoring—from code-level to customer experience Application Performance Monitoring Remove complexity and solve problems more quickly with proactive, end-to-end performance monitoring. End-User Monitoring Create better experiences where your customers are engaging with your business the most. Business Performance Monitoring See the real-time impact application performance and customer experience are having on your bottom line. AppDynamics bonkey: " I still call it CRASHDynamics " ...maybe they improved since then? New Relic Performance monitoring for today’s digital business Full Stack Visibility Monitor and optimize your entire technology stack—from your infrastructure and applications to browser and mobile apps. Built to Scale The only pure-play 100% multi-tenant cloud platform that's easy to deploy. And with no hardware to manage, you can see higher ROI and significantly lower TCO. Real-time Analytics for Ev...
Post a Comment
Read more

PeekPop - Pre-iPhone 6S and 6S+

Peek and Pop Let your users preview all kinds of content and even act on it — without having to actually open it. Users can then press a little deeper to Pop into content in your app. Apple 3D Touch PeekPop Peek and Pop is a great new iOS feature introduced with iPhone 6S and 6S+ that allows you to easily preview content using 3D touch. Sadly, almost 80% of iOS users are on older devices. PeekPop is a Swift framework that brings backwards-compatibility to Peek and Pop. GitHub
Post a Comment
Read more

iOS and Android native App Install Banner

Android Native App install banners are similar to Web app install banners, but instead of adding to the home screen, they will let the user install your native app without leaving your site. Developer Google iOS Promoting Apps with Smart App Banners: Safari has a new Smart App Banner feature in iOS 6 and later that provides a standardized method of promoting apps on the App Store from a website. Developer Apple
Post a Comment
Read more

Custom Launch Images with Storyboards since iOS 8

Earlier this week, tweets from Nick Lockwood and James Thomson alerted me to an as yet undocumented new feature in the iOS 8 SDK: you can now use a storyboard scene in place of your app’s launch images. Creating a Launch Screen File The launch screen file is displayed as a splash screen while your app is launching. It’s a single, atomic .xib file that uses size classes to support different device resolutions. It contains basic UIKit views, such as UIImageView and UILabel objects, and uses Auto Layout constraints. Xcode adds a default launch screen file, called LaunchScreen.xib, to your project. Follow these guidelines when creating a launch screen file: Use only UIKit classes. Use a single root view that is a UIView or UIViewController object. Don’t make any connections to your code (don’t add actions or outlets). Don’t add UIWebView objects. Don’t use any custom classes. Don’t use runtime attributes. You can add a launch screen file to an older Xcode project. To c...
Post a Comment
Read more

Getting Started with Swift on Android

The Swift stdlib can be compiled for Android armv7, x86_64, and aarch64 targets, which makes it possible to execute Swift code on a mobile device running Android or an emulator. This guide explains: How to run a simple "Hello, world" program on your Android device. How to run the Swift test suite on an Android device. GitHub
Post a Comment
Read more