Creating Iconsets (ICNS)

See the Pen CSSCities by Andrew Currie (@andrewjcurrie) on CodePen.

Did you know you can customize nearly all of the icons on your Mac? It’s no big secret and lots of people are aware of this. You can customize your folder icons, your application icons even your internal and external drive icons. Depending on what icon you are customizing, you may or may not need an iconset (ICNS) file. Generally speaking to
customize folders or internal/external hard drives, you will not need an ICNS file but to customize application icons you often will. OS X has made the process of creating an iconset fairly easy since OS X 10.7 Lion. Below I will explain the process required for creating your own iconset files:

Before you start, you must have the icon you wish to create in at least 1024 x 1024 resolution or higher and preferably perfectly squared. Then using your favorite image editor (Photoshop, GIMP, Affinity Designer etc.) create a 1024 x 1024 transparent PNG of your icon and save it as [email protected]. We are going to need 9 more PNG copies of the same image at various sizes in order to create the icon set. So next create the other 9 PNGs using the filenames and resolutions specified below:

Filename	Image Resolution
icon_512x512.png	512 x 512
[email protected]	512 x 512
icon_256x256.png	256 x 256
[email protected]	256 x 256
icon_128x128.png	128 x 128
[email protected]	64 x 64
icon_32x32.png	32 x 32
[email protected]	32 x 32
icon_16x16.png	16 x 16

Now that you have all ten of the required PNG assets for your iconset, create a folder with the name of your iconset i.e. iconname.iconset, where iconname is the name of the icon. OS X will ask you to confirm that you want to use .iconset for the extension, be sure to click yes on that confirmation window.

That’s it! You have just created an iconset. You can preview your new iconset by selecting and then pressing the spacebar to open it in Quick Look. Below is a preview of a custom icon I recently built for JetBrains PhpStorm:

Now we need to convert your new iconset into an ICNS file so it can be used as a custom application icon. Mac has a built-in icon utility that we can invoke from the Terminal using the command below:

1	iconutil -c icns ~/Desktop/iconname.iconset

Once you type the command above and press Enter, the iconutil will create an ICNS file right next to your iconset folder. In most cases, customizing a folder or drive icon is as easy as opening the Get Info window by selecting and pressing Command + I or right-clicking and choosing Get Info then clicking on the icon and then pressing Command + V when you have the icon you wish to use on your clipboard.

When customizing application icons though you will often need to replace the ICNS file or you might experience your application icon changing back and forth from the default icon to your custom icon. To prevent that right click on your application and select Show Package Contents then double-click the Contents folder then double-click Resources. The applications icon (ICNS) file will usually be stored in this location. For example for JetBrains PhpStorm, the icon file is webide.icns and is located in the Resources folder so I backed up the original by renaming it to original-webide.icns in case I ever want to change it back to the default then I copied in my custom webide.icns file and viola I now have a really cool custom PhpStorm icon.

I hope someone finds this post helpful when customizing icons and if you have any feedback, comments or suggestions, please leave them below. Thanks for reading and happy custom icon trails!