Practical guide to designing a logo for your app
I was trying to make a history facts app and I realized that I needed an app icon. This was not something I really thought about during the making of the app. Fortunately for me, I was able to quickly find a way to design an icon from scratch. I was also able to make it into a smooth image that could be added into Xcode. For context, I was using Procreate to design the app and Swift in Xcode to code for iOS. Here, I’ll show you the quickest way I know to create an app icon.
1. Choose a centerpiece for your icon
Choose an icon that fits well to the theme of the app you are designing. It should be simple — like a clip art that would remind you of your app’s purpose. For my history app, I thought a old-looking ship would remind people of old historical books or history books from elementary school.
2. Find a reference image
The fastest way for me to draw a simple design is to have a reference. Just try searching up “*your centerpiece* icon simple” on Google Images. For example, I searched “pirate ship icon simple” and found this:
3. Simplify the reference image
Redraw your own version of the reference image to become as simple as possible. I used Procreate, but you can use any digital drawing software. One that provides the ability to create perfect straight lines or curved lines would be ideal. Also, you should start with only two colors to make sure the design doesn’t start off too complicated.
During this step, you are also free to make some artistic decisions on how much more simple your design should be. You could also add more flavor to the background — for me, I love circles, so I added two circles to focus the audience in on the ship.
4. Choose a color palette
Most apps use a simple color palette of two or sometimes three colors. I used the color palettes that were shown on Procreate. However, I would recommend that you experiment with a couple options. I knew I wanted a lighter foreground and darker background to have the logo really pop out. I chose a green background and a lighter gold foreground. I thought this would give the appearance of an ancient emblem found on an abandoned cloth or wall of a palace.
5. Add a gradient and finishing touches
For more recent Apple icons, I noticed that there were more apps that used a gradient background to make it look like there was a shadow from a mysterious light source on your phone screen. I didn’t necessarily want to achieve the same, but wanted to fill up the background of my icon more. It just ended up looking similar. I first used a large brush to add green on the top half of the background and blue on the bottom half of the logo. I used a transparent eraser to slowly erase the green off. Then I used the Gaussian Blur feature to smooth everything out. Afterwards, I cropped using Microsoft Word and increased the contrast to make the foreground pop out.
6. Add to Xcode assets
This part is more technical details that will make your icon compliant with Xcode. First, center your icon and then crop to 1024 by 1024 pixels. Then, remove the alpha channel (because transparency is not allowed). Now you can navigate to your assets and just drag and drop to where it says AppIcon.
7. Launch and test
Time to enjoy the fruits of your work. Try launching it on a simulator or your actual device. Make sure that the everything looks right, the edges aren’t clipped, and the quality is good.
And that’s it!
If you are interested in seeing my app in action, app icon and all, here it is: https://apps.apple.com/us/app/historical-facts/id1665761564
Please hit the 👏 button if this article helped you. Let me know in the comments if you have additional advice for people designing their first app icon. :)
