Prefer graphical images to photos and avoid replicating UI components in your icon. Although using a mnemonic like the first letter of your app’s name can help people recognize your app or game, avoid including nonessential words that tell people what to do with it - like "Watch" or "Play" - or context-specific terms like "New" or "For iOS." In some contexts, the app name appears near the icon, making it redundant to display the name within it. Text in icons is often too small to read easily, can make an icon appear cluttered, and doesn’t support accessibility or localization. Prefer including text only when it’s an essential part of your experience or brand. For example, in iOS and watchOS, the Mail app icon uses a streamlined, graphical style to depict the white envelope on a blue background macOS uses a similar blue background, adding depth and detail to the envelope, giving it a realistic weight and texture. If your app or game runs on more than one platform, use a similar image and color palette for all icons while rendering them in the style that’s appropriate for each platform. Prefer a simple background that puts the emphasis on the primary image - you don’t need to fill the entire icon with content.Ĭreate a design that works well on multiple platforms so that it feels at home on each.
Avoid adding too many details, because they can be hard to discern and can make an icon appear muddy, especially at smaller sizes. Find a concept or element that captures the essence of your app or game, make it the focus point of the icon, and express it in a simple, unique way. Simple icons tend to be easier for people to understand and recognize. For guidance on creating other types of icons, see Icons.
To download templates that help you create icons for each platform see Apple Design Resources. Each platform defines a slightly different style for app icons, so you want to create a design that adapts well to different shapes and levels of detail while maintaining strong visual consistency and messaging. File -> New -> Image Asset, or it can be done via a online Android icon generator at įor IOS, search for IOS app icon generator and you should find a lot of online tools for generating IOS and Android app icons.A unique, memorable icon communicates the purpose and personality of your experience and can help people recognize your app or game at a glance in the App Store and on their devices.īeautiful app icons are an important part of the user experience on all Apple platforms and every app and game must have one. Generate App Iconsįor Android, it can be done in Android Studio.
To change or update the app icon for IOS, launch XCode, navigate to Images.xcassets folder from the left directory panel, and then select AppIcon, then drag icon images to the appropriate location. App icon for AndroidĪpp Icon file size: 40, 58, 60, 80, 87, 120, ,121, 180, 1024, etcĪpp Icon file locations: Images.xcassets/AppIcon.appiconset To change or update the app icon for Android, just replace the icon images in those image folders. App icon for AndroidĪpp Icon file name: ic_launcher.png, ic_launcher_round.pngĪpp Icon file size: mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpiĪpp/src/main/res/mpimap-hdpi/ic_launcher.pngĪpp/src/main/res/mpimap-hdpi/ic_launcher_round.pngĪpp/src/main/res/mpimap-mdpi/ic_launcher.pngĪpp/src/main/res/mpimap-mdpi/ic_launcher_round.pngĪpp/src/main/res/mpimap-xhdpi/ic_launcher.pngĪpp/src/main/res/mpimap-xhdpi/ic_launcher_round.pngĪpp/src/main/res/mpimap-xxhdpi/ic_launcher.pngĪpp/src/main/res/mpimap-xxhdpi/ic_launcher_round.pngĪpp/src/main/res/mpimap-xxxhdpi/ic_launcher.pngĪpp/src/main/res/mpimap-xxxhdpi/ic_launcher_round.png
For React Native, since it’s cross platform, but it still has to follow the app icon rules for Android and IOS. Android and IOS both have their own set of rules for creating app icons.