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

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

Server-driven UI (SDUI): Meet Zalandos AppCraft and AirBnB Lona

A short WTF: Joe Birch:  SERVER DRIVEN UI, PART 1: THE CONCEPT Zalando seems to follow the SDUI principle as well - defining a common design language and construct the screens on the backend while displaying them natively on the clients. They even go one step further; they implemented a mighty toolset to enable non-technical stakeholders to define their own native app screens Compass: Web tooling to create screens and bind data Beetroot: Backend service that combines the screen layout definition with the data Lapis/Golem: iOS/Android UI render engines Crazy cool! Good job, guys (when you do an open-source release?) To even move faster a Flutter based UI render engine implementation was great! See also AirBnB Lona SDUI approach Building a Visual Language Why Dropbox sunsetted its universal C++ mobile project and AirBnB its React Native implementation
2 comments
Read more

UIDeviceOrientation vs. UIInterfaceOrientation

We stumbled upon a bug in one of our apps: - rotate the Homescreen to Landscape - go to some other screen - put the device on the table and go back - the homescreen is all messed up This behavior was similar with some other View controllers. The problem was in the viewDidAppear where the Interface should be rotated to Layout or Portrait- the UIDevice Orientation was used ( [UIDevice currentDevice].orientation ) an when you put the device on the Table the orientation of the Device is always "UIDeviceOrientationFaceUp". The Problem is that the Device Orientation could be FaceUp in Portrait AND Landscape mode so for this use-case this doesn't give you the proper information. instead determining the orientation by: UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation) you should do this (at least in View controllers) and use the interfaceOrientation property: UIInterfaceOrientationIsLandscape(self.interfaceOrientation)
Post a Comment
Read more

Alpha Apps vs. App Unbundling

Aktuell wird viel über das Modell der "Alpha Apps" und "App Unbundling" gesprochen. Hier kurz eine Ãœbersicht und meine 5 cents: Alpha Apps Die chinesische App WeChat geht noch weiter: Neben einem Messenger, vergleichbar mit WhatsApp, bietet sie einen Lieferdienst à la Lieferando, die Möglichkeit etwa das eigene Konto zu checken (wie sonst bei der Bank-App) und gleichzeitig die Chance etwa Promis zu folgen, wie es Twitter bietet. Solche Alpha-Apps können dadurch verschiedene Aspekte und Möglichkeiten des Internets verbinden und werden so zum idealen Zugangsportal zum Netz – so wie traditionell der Browser am Computer. Den Tod des Browsers bedeutet das aber noch lange nicht. Der Browser ist tot, es lebe der Browser! Wirtschafts Woche App Unbundling Unbundling steht für das Unterteilen von Apps oder verschiedener Funktionen in mehrere, eigenständige Applikationen. Aber nicht jede Unbundling Aktion wird positiv von Usern aufgenommen. Facebook Messenger ...
Post a Comment
Read more

Unidirectional Data Flow Architecture (Redux) in Swift

In this post, I try to explain why using Redux with Swift is better idea [than MVVM]. What is Redux and Unidirectional Data Flow? Redux is a flux implementation but slightly better implementation, it makes your application’s state more predictable. It first came out in Javascript world as a predictable state container for JavaScript apps with the powerful javascript library React. Redux, simply makes your application’s state in single store object. So firing an action from your application/in view’s lifecycle state changes and your reducers for that action generate a new state. Seyhun Akyürek at Medium Replacing Redux in Swift with something better Being a fantastic framework for development doesn’t come without a cost. Every time you update internal state in Redux, the entire interface re-renders. This isn’t a huge deal in most cases. But eventually you might have a situation where one update to state needs to be instantaneous (like using the keyboard shortcut to move f...
Post a Comment
Read more

I show you mine if you show me yours first - Our current Android and iOS Stack

Something from our internal  WeltN24  native apps lab: We just setup a new app from scratch, which puts us in the nice position of incoroporating the latest frameworks an pattern. We go for a Reactive and MVP approach. Please find below some details. I would be happy to hear about your choices - please leave a comment! Android iOS OS Android 4.1 (4.0.3+) API Level 16 iOS 8 Language Kotlin 1.0, with fallback to Java where necessary Swift 2.1.1 Pattern Reactive & MVP Reactive and MVVM Libs AndroidRx Dagger 2 Retrofit 2 Dbflow Glide Crashlytics JW-Player Gson Interstellar Dependency Injection (custom) JW-Player Alamofire JW Player realm.io Carlos BrightFutures ObjectMapper (custom) Testing JUnit Mockito / PowerMock & Hamcr...
Post a Comment
Read more