App Icon: Overview & Tips

Last Updated: Feb 14, 2018 11:32AM PST

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's one Step 5 element that can't be changed without republishing/updating your app completely, it's very important to ensure your app icon is exactly as you'd like it before publishing.

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's 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.

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.

Don't enable transparency in any part of your app icon. Apple no longer accepts transparent icons, and these portions of your icon will be transformed to 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!

Don't use copyrighted images not owned by your or your client, or images that are even mildly inappropriate. Apple will reject the app in either situation.

Photoshop How-To

1. Open Photoshop.

2. Click File > New Image

3. Set the size to 1024x1024px. Click Save.

4. If you're 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.

5. If you're on a PC, go to Photoshop, and press CTRL + V (CMD + V on a Mac) to paste the image. On Macs, just drag and resize the image as you'd like!

6. Now, adjust the image to your liking. I like the purple background here so I'm going to use the "Selection Tool" to grab the background of the purple, stretch it, and fill the screen with it.

7. I make my selection, copy/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.

8. When I'm done transforming the layer, it fills up the screen.

9. Now I'm going to add a logo to this purple background. I do this by taking the original screen capture with the logo and adjust the logo in the same way I did the background. I also moved the original screen capture "layer" up so I could view it.

10. I copy/paste the logo and delete the screen capture I originally placed on this icon image. I'm left with a purple background and a logo.

11. Now I'm going to "transform" to fill the icon by pressing CTRL + T (on a PC) or CMD + T (on a Mac). This just basically means I'm going to fill up the icon with the logo. Hold Shift while adjusting the logo to keep the dimensions of the logo.

12. Done! This will look really nice when displayed on an iPhone. It's best to keep your icon simple because when it's viewed on an iPhone it will be very small. In other words, intricate details will be hard to see on a mobile device.