Creating An App Icon

Creating an app icon that can be use for macOS apps It also supports retina screens.

⚠️️ Use apples sketch templates from apple resources. They have all sizes and names. Just press export and make sure your document settings is P3. So that the colors are correct. There are templates for iOS and macOS

.png 👉 .icns

Download IconMaker.app 👈 (It’s just an .applescript won’t bite)
If you get a warning while using the app go to MacOS prefs -> security & privacy -> General -> click open anyway
Drag and drop your icon.png onto the IconMaker.app and your done 🎉 (Png must be exactly 1024 x 1024px)

Example:

Here is an app icon I created in Illustrator:

gitsync_logo_2016_blue_1024.icns

Now you have the .icns file that can be added to your xcode project.

Build IconMaker.app your self:

This applescripts can convert a .png to an .icns file in 4 simple steps:

Open the AppleScript app
Copy and paste the code into AppleScript from JoeFrizzell in the link bellow.
Save as: IconMaker.app
Drag and drop your .png onto the IconMaker.app you just created.

Credits to JoeFrizzell via: http://apple.stackexchange.com/a/140361/179041

Running the app requires:

MacOS Sierra has stricter security than before. To bring back running apps from unidentified developers simply write sudo spctl --master-disable in terminal and hit enter, as per: http://osxdaily.com/2016/09/27/allow-apps-from-anywhere-macos-gatekeeper/ (You can always enable it after) Or you can build from source your self and GateKeeper won’t complain.

High Sierra update:

Since macOS high sierra, you need to be strict about size. Make sure the png size is exactly 1024x1024px. Or else it won’t work. Basically the iconutil that IconMaker utilises has been upgraded in High Sierra. I tested a 1000x1000px file in Sierra and it worked. But not in High Sierra. So make sure your source png is the correct size. 💪

Doing all of this with just terminal:

Create a png file that is exactly 1024x1024px

Make sure all your icons are named exactly like the bellow: (it can be the same 1024x1024px png, but they must be named correct)

icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
icon_256x256.png
icon_256x256@2x.png
icon_512x512.png
icon_512x512@2x.png

Put the png’s in a folder named: someIcon.iconset and put the folder on your desktop
Open Terminal and paste this line: iconutil --convert icns ~/Desktop/someIcon.iconset
You should now have someIcon.icns on your Desktop ready to be used in your macOS app projectgit

Bonus points:

sips -Z 512 ~/Desktop/someIcon.png You could add shell commands that resizes the images for you, in the applescript to actually resize each image. But I didn’t have time for this step this time around. Maybe next time I revisit this app ill implement it. You can also probably make a photoshop script that does all the resizing and renaming for you. let me know if you make any of this ideas and ill be sure to share it with the world. Thanks for reading ✌️

Resources:

For iOS11 icons you can use this online converter: https://makeappicon.com
There is a sketch plugin that makes xCode icons https://github.com/nathco/Export-More
Related: https://github.com/raphaelhanneken/iconizer
Related: https://github.com/kuyawa/AppIcons
⭐ Export pngs of all sizes with sketch and apples own template: https://medium.com/kennethlng/how-to-use-apples-app-icon-sketch-template-for-xcode-2a4458c75ac1
⭐ Apples .sketch templates for macOS and iOS can be downloaded here (a bit tricky to setup the first time, also the mac template has perfect margins): https://developer.apple.com/design/resources/
⭐ Instead of dragging each icon you can use a filled out .json: https://medium.com/sketch-app-sources/painless-icon-generation-for-ios-apps-with-sketch-and-xcode-part-2-1c33527bcd73