Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to manually create icns files using iconutil?

People also ask

What is an ICNS file?

What is an ICNS file? An icon format used by macOS programs is called an ICNS file. It allows 1-bit and 8-bit alpha bands and saves one or more pictures, usually made from PNG documents. The program icon in the macOS browser and interface is displayed using ICNS files.

What are the dimensions for a ICNS file?

Import by default uses the "ImageList" element for ICNS files. Export accepts Image and Graphics of dimensions 512×512, 256×256, 128×128, 48×48, 32×32, and 16×16. An image or graphics object not at one of the standard dimensions will be scaled so that its longest dimension fits the closest standard dimension.


Here's a script to convert a 1024x1024 png (named "Icon1024.png") to the required icns file. Save it to a filed called "CreateICNS.src" in the folder where your png file is then in terminal "cd" to the same folder and type "source CreateICNS.src" to call it:

mkdir MyIcon.iconset
sips -z 16 16     Icon1024.png --out MyIcon.iconset/icon_16x16.png
sips -z 32 32     Icon1024.png --out MyIcon.iconset/[email protected]
sips -z 32 32     Icon1024.png --out MyIcon.iconset/icon_32x32.png
sips -z 64 64     Icon1024.png --out MyIcon.iconset/[email protected]
sips -z 128 128   Icon1024.png --out MyIcon.iconset/icon_128x128.png
sips -z 256 256   Icon1024.png --out MyIcon.iconset/[email protected]
sips -z 256 256   Icon1024.png --out MyIcon.iconset/icon_256x256.png
sips -z 512 512   Icon1024.png --out MyIcon.iconset/[email protected]
sips -z 512 512   Icon1024.png --out MyIcon.iconset/icon_512x512.png
cp Icon1024.png MyIcon.iconset/[email protected]
iconutil -c icns MyIcon.iconset
rm -R MyIcon.iconset

Checkout the following instructions (link):

Use iconutil to Create an icns File Manually

The iconutil command-line tool converts iconset folders to deployment-ready, high-resolution icns files. (You can find complete documentation for this tool by entering man iconutil in Terminal.) Using this tool also compresses the resulting icns file, so there is no need for you to perform additional compression.

To convert a set of icons to an icns file

Enter this command into the Terminal window:

iconutil -c icns <iconset filename>

where <iconset filename> is the path to the folder containing the set of icons you want to convert to icns. The output is written to the same location as the iconset file, unless you specify an output file as shown:

iconutil -c icns -o <icon filename> <iconset filename>

In other words, you need to replace <iconset filename> by the path:

/Users/myname/SDK Mac Apps/MyApp/grafica/icon.iconset

Since the path contains spaces, you need to use double quotes, for example:

iconutil -c icns "/Users/myname/SDK Mac Apps/MyApp/grafica/icon.iconset"

This command should work properly.


While using all kinds of scripts to convert hi-res PNG image to a pleiad of different low-resolution copies may seem handy (and it really is), one should not forget that this kind of automatic resizing will render perceptibly imperfect images.

Lesser the resolution — blurrier the icon!

I mean, I love imagemagick too, but it is not the right tool for this task!

Instead, you should always request a logo in some vector format from your designer, for example in SVG. With this on hand, you can manually prepare perfect PNG files in all required resolutions and then make a single .icns file, which will make your app icon look beautiful on every single screen, from a cheap iPhone SE to some high-end Retina display of the latest iMac. You can use Photoshop, GIMP or any other tool of your choice to generate these PNGs.

From the latest Apple's Human Interface Guidelines as of 2020, you should prepare the following PNG files:

+---------------------+--------------------+--------------+
|      filename       | resolution, pixels | density, PPI |
+---------------------+--------------------+--------------+
| icon_16x16.png      | 16x16              |           72 |
| [email protected]   | 32x32              |          144 |
| icon_32x32.png      | 32x32              |           72 |
| [email protected]   | 64x64              |          144 |
| icon_128x128.png    | 128x128            |           72 |
| [email protected] | 256x256            |          144 |
| icon_256x256.png    | 256x256            |           72 |
| [email protected] | 512x512            |          144 |
| icon_512x512.png    | 512x512            |           72 |
| [email protected] | 1024x1024          |          144 |
+---------------------+--------------------+--------------+

After all the PNG files are prepared, place them into some directory with .iconset extension (Logos.iconset for example) and execute the following from the Terminal:

iconutil --convert icns Logos.iconset

If there were no errors after executing this command, then all the files were processed properly, and you got the Logos.icns file in the same directory, containing all the beautiful crisp logos for your app which will suit any modern screen.


There's a command-line node module that does all the work of converting a PNG file into an iconset directory:

npm install -g node-icns
nicns --in adventure-cat.png --out adventure-cat.icns

These commands (entered in Terminal) worked for me to convert an old icns file to the new format:

cd Folder_With_Icns_File
iconutil -c iconset Your_Icon_Name.icns 
rm Your_Icon_Name.icns 
iconutil -c icns Your_Icon_Name.iconset
rm -R Your_Icon_Name.iconset

Update

The -c parameter to iconutil is no longer supported. Use --convert instead:

cd Folder_With_Icns_File
iconutil --convert iconset Your_Icon_Name.icns 
rm Your_Icon_Name.icns 
iconutil --convert icns Your_Icon_Name.iconset
rm -R Your_Icon_Name.iconset