Your App Icon is a big part of your app's presentation. It appears in the App Store and Google Play, as well as on the device screen itself once installed. Since it is one Step 5 element that cannot be changed without republishing/updating your app completely, it is very important to ensure your app icon is exactly as you would like it before publishing.
In this article, you will learn about the recommended dimensions, the do's and don'ts of creating an app logo, and how to design/create your images using Photoshop.
Things to remember:
- The corners of iOS app icons are automatically rounded by iTunes Connect, whereas Android app icons take on the exact shape you set them to.
- Never enable transparency for any portion of your app icon—it is no longer compatible with iOS, and any transparent portions of the icon will be converted to solid black by default, leaving you with a much different icon than intended.
Recommended App Icon Dimensions: 1024x1024px
App Icon Tips
- Do use a high-quality image that will look nice when reduced to a very small size. Look at app icons created by popular companies like Facebook, Google, LinkedIn, etc. They're simple and clean, but recognizable at any size.
- DO use the company's logo if it's well suited to an app icon. This will always be the most recognizable image to users when they're searching the App Store or their phone screen.
- DO NOT enable transparency in any part of your app icon. Apple no longer accepts transparent icons, and these portions of your icon will be transformed into black. Our system currently disallows transparency and will transform transparent portions to solid white in an effort to avoid the blackening. Best to do yourself a favor and avoid using transparency altogether!
- DO NOT use copyrighted images not owned by you or your client, or images that are even mildly inappropriate. Apple will reject the app in either situation.
- Open Photoshop.
- Click File > New Image.
- Set the size (recommended Width x Height: 1024 x 1024 pixels).
- Click Save.
- If you are modeling your app icon on the business's website, you can:
- Save images from the site.
- Take a screen capture by pressing CTRL + ALT + PRNTSCRN (top right corner on a PC) or COMMAND + Shift + 4 on a Mac. This captures a particular section of your screen, which you frame with your cursor.
- If you are on a PC, go to Photoshop, and press CTRL + V to paste the image.
- On a Mac, press CMD + V and just drag and resize the image as you like!
- Now, adjust the image to your liking. Let us start with a background.
- Use the Selection Tool to grab your preferred background, say a solid blue color, stretch it, and fill the screen with it.
- Copy and paste it to create a new layer, and then press CTRL + T (on a PC) or CMD + T (on a Mac) to 'transform' the layer to fill up the image screen.
- The layer fills up the screen when the transform is done.
- Now add a logo to the background by taking the original screen capture with the logo and adjust it in the same way you did the background. You can move the original screen capture 'layer' up so you can view it.
- Copy and paste the logo and delete the screen capture originally placed on this icon image. You are now left with a blue background and a logo.
- Transform to fill the icon by pressing CTRL + T (on a PC) or CMD + T (on a Mac).
- This just basically means that the icon will be filled up with the logo.
- Hold Shift while adjusting the size of the logo.
Done! This will look really nice when displayed on an iPhone. It is best to keep your icon simple because when it is viewed on an iPhone it will be very small. In other words, intricate details will be hard to see on a mobile device.