Fork us on GitHub

TIP: Create Square Icons

Avoid the round edge approach that is common in iOS icons
Post Image

TIP: Create Square Icons

This is inspired by this post that covers the process of creating different icons for different OS builds. But here I’d like to discuss the lowest common denominator and how we got it wrong!

On Android an icon can have any shape and often does, on iOS we usually expect a rounded corner look and on Windows we expect square icons. The thing is that iOS automatically crops the icon with round corners, so if you provide a completely square icon it should work just fine.

As part of that we are tuning slightly the default icon that ships with Codename One to look like this:

Square default icon
Figure 1. Square default icon

The main value is that this looks good on Windows, iOS and reasonable on Android. The alternative of Android style icons looks horrible on iOS and Windows.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.