Mobile app version of vmapp.org
Login or Join
Shelley591

: MacOS Icons: Combining three different designs into one ICNS file I created three different versions of one Mac icon in Sketch ranging from least detailed (small version) for 16x16 to most detailed

@Shelley591

Posted in: #FileFormat #Icon #Mac #SketchApp

I created three different versions of one Mac icon in Sketch ranging from least detailed (small version) for 16x16 to most detailed (large version) at 512x512. The plugin I use in Sketch exports an artboard into an icns file that include all the necessary resolutions for implementation. This is helpful because implementation of Mac icons only allow for one file. However, I want to be able to use the small version of the design for 16x16/@2x, 32x32/@2x; the medium version for 128x128/@2x; and the large version for 512x512/@2x. But I'm finding it hard/have no resources for combining all of those versions into one icns file.

I find it pretty disheartening since the HIG recommends designing less detailed versions of the same design for smaller resolutions from what I understand.

Does anyone have any advice, resources or workaround? Thanks!

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Shelley591

1 Comments

Sorted by latest first Latest Oldest Best

 

@Turnbaugh909

I have no idea about Sketch (I don't use it), but you can create the ICNS file from the Terminal...

Put all your icons in a folder with nothing but the individual image files. The images should all be named with the convention:

icon_<sizeinpoints>x<sizeinpoints>[@<scale>].png


The folder can be called whatever you like but has to have the .iconset extension (it's weird for a folder to have an extension, yes, but that's how the system knows it's an icon set).

So your folder should look something like:

MyIcons.iconset
|- icon_16x16.png
|- icon_16x16@2x.png
|- icon_32x32.png
|- icon_32x32@2x.png
|- icon_128x128.png
|- icon_128x128@2x.png
|- icon_512x512.png
|- icon_512x512@2x.png


Then from Terminal, run iconutil with the command...

iconutil -c icns <iconset filename>


Where <iconset filename> is the path to the iconset folder (Tip: you can drag the folder from Finder to the terminal and it will paste the correct path).

That will create the ICNS file for you with the same name and in the same location as the iconset folder you created it from.

You can read more here:


macOS Human Interface Guidelines: Package Your Icon Resources
Provide High-Resolution Versions of All App Graphics Resources

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme