***  I do not use affiliate links. Any product links are included solely because I find them useful. ***

Level: Easy

If you’re a solo developer, all tasks belong to you. That includes creating app icons and formatting them correctly for different platforms.

Adding app icons to Xcode for iOS/iPadOS apps got much easier in Xcode 14.

Step 1- Create your icon as a 1024 x 1024 px .png file. I use Pixelmator Pro. (You’ll find useful design guidelines for creating your icon here)

Step 2- In Xcode Assets.xcassets add an iOS App icon.

Step 3- In the Attributes inspector, select Single Size.

Step 4- Drag your image onto the 1024 x 1024 px placeholder.

Step 5- In the General settings for your target, add the App Icon name to the App Icons and Launch Screen settings.

Xcode will generate all the image sizes required to submit your app.

But what if you also want to submit a Mac Catalyst version of your app?

That’s where things get more complicated, as I learned when I shipped a Mac Catalyst version of “Remembered: Back Up your Brain”

I discovered two issues:

1. Despite Apple’s documentation which suggests otherwise, Xcode 14 doesn’t have a single size option for macOS App Icons. As of Xcode 15, there’s still no single size option for macOS.

2. If you use your iOS icon artwork for your Mac Catalyst version, it’s going to look odd because,

• the borders won’t be rounded, and
• It’ll look about 24% bigger than most other Mac app icons.

Technically, Apple recommends but doesn’t require rounded corners or even a size that matches most macOS app icons. If you really want your app icon to have square corners, skip step 4 below.

Fortunately, it’s easy to fix these issues. It’s particularly easy to create macOS app icons if you’re a Photoshop, Adobe XD or Sketch user. You’ll find production templates from Apple here and can skip steps 1-5 below.

I use Pixelmator Pro for virtually all of my design needs, so I’m going to use it to show you how to create a macOS app icon, but you should be able to recreate these simple steps in your preferred layer-based design environment. if it has basic features and can export a .png file, you’re good to go.

Step 1- Create an empty document with a 1024 x 1024 px image layer. Pixelmator Pro has a Preset for this called “Mac App Icon 1024”.

Step 2- Change the opacity of the image layer to 0.

Step 3- Add a new layer with a round rectangle. Center it and set its dimensions to 824 x 824 px.

Step 4- Set the corner radius of your round rectangle to 185 px.

There’s considerable debate about the correct corner radius on various forums and discussion boards. This is why using Apple’s production templates is preferred if you have Sketch or XD. I chose 185 empirically by superimposing a round rectangle on top of Apple’s macOS Monterey Photoshop production template. It may not be pixel perfect, but it’s close. Others argue that the correct corner radius is anywhere from 160 to 228 px. A round corner isn’t required, so use what works for you.

Step 5- Apply a black shadow to the round rectangle with these parameters. This is also optional but will give your icon an appearance that’s similar to most others that users will have in their docks.

Congratulations! You now have a template upon which to add the artwork for your icon.

All good, but how do you tell Xcode to use your iOS icon for an iOS archive and your macOS icon for your Mac Catalyst archive?

As noted above, Xcode doesn’t (yet?) allow you to use a single .png file to generate all macOS icon sizes. You can generate these manually and drag them onto each placeholder, but do you really want to do that? I don’t.

There’s a better way. In the Mac App Store you’ll find many utilities that will take your .png file and generate the .appiconset folder that you can drop into Xcode. Some are free. I use “Assets Maker for Xcode”. Grab a copy and follow along:

Step 1- Open “Assets Maker for Xcode” or your preferred asset generator. Select Mac App, drag your mac icon .png file onto it and click “Create Assets”.

Step 2- Select a destination and name for your .appiconset file.

Step 3- This will create a folder containing a “Contents.json” file and .png files in various sizes.

Step 4- Drag this folder into Xcode Assets.xcassets.

Step 5- In the Attributes inspector, change the iOS selection from “None” to “Single Size”

Step 6- Drag your iOS app icon .png file onto the iOS icon placeholder.

You’re done! You now have an AppIcon that contains everything Xcode needs to generate icons for your iOS and Mac Catalyst archives.