My icon is appearing choppy and blurred on iPhone, how can I fix it?

Question

I'm creating an iOS 8 app icon in Sketch 3. For learning purposes, I've only set the color of the icon shape and I haven't added any other layers to it.

What I did:

• Create app icon from iOS template
• Remove all the sizes except for 1024x1024
• Set a nice gradient background color
• Export to 58x58 using by clicking make exportable then entering 58x58 in the size field and exporting.
• Add the icon to the far-left "window" in Xcode (Images.xcassets) in the 2x window over iPhone.

The edges of the app icon seems kind of choppy and blurred out on the phone, it isn't clear and sharp like every other icon, do you have any idea why this is and how I can fix it?

Thanks!

Answer 1

Have a look at the following Apple document: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

This lists all pixel sizes you should use for icons... Where did you come up with 58x58 for an application icon? Try adding the correct format for your phone to see whether that solves the problem.

Once you make a real app you should of course add the correct sizes for any device you want to support...