Icons
Using an icon generator can save you a lot of time when producing multiple sizes for app icons required by Apple’s platforms. Icon generator will output a folder containing all of the necessary icon sizes.
General process on how to work with icons generator:
- Upload the high-resolution image of your icon
- Specify that you want to generate icons for iOS/macOS/watchOS
- Download the generated icons, which will be zipped
- Unzip the downloaded file. You’ll find a folder structure with all of the required icon sizes
- Open your Xcode project
- Navigate to the Assets.xcassets directory in the Project Navigator
- If you’re starting from scratch, right-click in the left pane of the Assets.xcassets > New App Icon
- Drag the entire folder from icon generator
Make sure the AppIcon is set in the project settings
- After adding the icons to Assets.xcassets
- Select your target
- Navigate to the “General” tab
- Scroll to the “App Icons and Launch Images” section
- Ensure the “App Icons Source” dropdown has your AppIcon selected
Specification
Always ensure that the original image you provide to the icon generator is of high quality. Poor quality or low-resolution images will result in icons that are blurry or pixelated.
Device | Purpose | Size (pt) | Resolution (@1x, @2x, @3x) |
---|---|---|---|
iOS | iPhone Notification | 20x20 | @2x, @3x |
iPhone Settings | 29x29 | @2x, @3x | |
iPhone Spotlight | 40x40 | @2x, @3x | |
iPhone App | 60x60 | @2x, @3x | |
iPad Notifications | 20x20 | @1x, @2x | |
iPad Settings/Spotlight | 29x29 | @1x, @2x | |
iPad App | 76x76 | @1x, @2x | |
iPad Pro App | 83.5x83.5 | @2x | |
App Store | 1024x1024 | @1x | |
iPadOS | Same as iOS for iPads | - | - |
watchOS | Notification Center (38mm) | 24x24 | @2x |
Notification Center (40mm, 42mm) | 22.5x22.5 | @2x | |
Notification Center (40mm, 42mm) | 22.5x22.5 | @2x | |
Notification Center (41mm, 44mm), Companion App | 29x29 | @2x | |
Notification Center (45mm, 49mm) | 33x33 | @2x | |
Home Screen (38mm, 42mm) | 40x40 | @2x | |
Home Screen (40mm) | 44x44 | @2x | |
Home Screen (41mm) | 46x46 | @2x | |
Home Screen (44mm) | 50x50 | @2x | |
Home Screen (45mm) | 51x51 | @2x | |
Home Screen (49mm) | 54x54 | @2x | |
Short Look (38mm) | 86x86 | @2x | |
Short Look (40mm, 41mm, 42mm) | 98x98 | @2x | |
Short Look (44mm) | 108x108 | @2x | |
Short Look (45mm) | 117x117 | @2x | |
Short Look (49mm) | 129x129 | @2x | |
macOS | App Icon | 16x16, 32x32, 128x128, 256x256 | @1x, @2x |
App Store | 512x512 | @1x, @2x | |
tvOS | App Store | 1024x1024 | @1x |
App | 400x240 | @1x, @2x | |
visionOS | App Store | 1280x768 | @1x |
Limitations
- App icons should reflect your app’s core functionality, and align with Apple’s Human Interface Guidelines.
- App icons should be in PNG format.
- Should not use alpha channels or transparencies.
- Avoid using text, as translation or localization may be needed.
- Needs to be distinct and easy to recognize at smaller sizes.
- For iPad icon should be recognizable in split view or multitasking view.
- For Watch OS given the smaller display, clarity is vital; intricate designs may lose detail. Should avoid tiny text or visuals that require fine precision to understand.
Additional App icons
You don’t need submit a new version of your app to change the icon if they already included in app bundle, you can switch between them.
There might be a minor delay when changing the app icon.
While the app is running in the foreground, you can’t change its icon more than once every 10 seconds.
Every alternative icon should be added to the app bundle, increasing the app size
Setting an Alternative App Icon in Xcode
- Design your App Icon Creatives according to Apple’s standards in 1024x1024 resolution
- Prepare app icons maintaining the required resolutions
- Add Icons to your Xcode Project
- Open your project > Assets.xcassets
- Right-click > App Icons & Launch Images > New App Icon
- Drag and drop your icons into the placeholders or just replace created Assets.xcassets > content to generated from aso.dev
- Modify Info.plist File.
- Navigate to CFBundleIcons > CFBundleAlternateIcons
- For each alternative icon you’ve added, create a dictionary entry. The key should be the name you wish to refer to your icon by (e.g., AdditionalIcon), and within that, add a key named CFBundleIconFiles with an array value containing the name of your icon (without the .png extension).
- Change Icon in Code
- Reset Icon