I’ve been reading the Icon Design Guidelines in the OS X Human Interface Guidelines today and noticed that Apple not only added one size of icon that should be created for use on Retina Macs, but they expect you to create the whole icon set twice. And also they’re no longer recommending using the ICNS format.
Table 5-1 of that document tells you to create the following icon sizes, each as a PNG file prefixed with the icon name:
|Filename||Size of canvas (in pixels)|
Icon files with the “@2x” part are meant to be shown on a Retina display. Apple expects you to create icons with less details for use on Retina screens instead of just using the standard bigger ones. That means 10 icons instead of 5. Well, probably not: I guess you should only create separate icons when appropriate.
The other change is the disappearance of a mention of the ICNS icon format. Not that this format has stopped to work, but the recommendation now is to use PNG files with the names above instead. I wonder how backward compatible this is.
Documentation on this matter is scarce. This seems like a last minute change. The Icon Design Guidelines seems to mention the naming convention only in relation to the app’s icon, but I have a hard time to believe it can’t be applied to other ones (I would guess the “icon” part of the file names above refers to whatever icon name you specified in your Info.plist, but that isn’t said). Perhaps they gave more details to WWDC attendees.
The funny thing is, if you look at the content of TextEdit in OS X 10.7.4, all the icons are still ICNS icons. But if you open them with Preview, you’ll see the files contains two 32×32 icons, two 256×256 icons, etc. in short each file contains all the 10 representations specified above. And even though the icon file contains duplicated sizes, they haven’t bothered changing the level of detail or anything.
So they did update the ICNS format so it can contain all those fancy “@2x” icons, but they don’t want us to use that for some reason. I’m puzzled.
Update: In the comments Philippe Wittenbergh points out that further down below in the section “Packaging Your Icon Resources” they explain that those PNG icons files should be put in a folder ending with
.iconset and run through the
iconutil command line tool to create the ICNS file. I guess this is my failure to read through the whole thing. This sentence is interesting: “You must use
iconutil, not Icon Composer, to create high-resolution
.icns files.” What happened to Icon Composer? This really does feel like a last minute change.