make your own .icns icons for free (it’s Christmas after all!)

Update: the procedure detailed below has now been turned into a little app. Have a look here!

There are some Application icons that just really annoy. Wouldn’t it be great if you could change them for something to your taste? In this tutorial, I’m going to take you through the basic steps of creating your own icons in png format, converting them into Apple’s icns format, and installing them into the application so that they display correctly throughout Finder and the Desktop. And the best news: you don’t need any commercial software, and the process – though lengthy – is not technically demanding.

1. Find or make the image
The first thing you’re going to need is a .png file of the image you want to use. If you want to create your own, you can use a free app like GIMP or Inkscape if you don’t have commercial software like Photoshop or Illustrator. Alternatively, you can use or modify an existing image. There’s a wealth of stock or public domain images on sites like DeviantArt and elsewhere.

If you’re starting from scratch in GIMP or other software, then use a base pixel size of 1024×1024 or 516×516. If you’re re-using a stock image and it’s not in the right pixel size, don’t worry, we’ll get to that shortly. The most important thing for now is that you save a working copy of the image in .png format.

2. Understanding icns files
Before we can do the next practical step, I need to explain something about icon files, so indulge me and try this little trick.

Open up the Applications folder in a Finder window. Locate Launchpad.app, and drag it from the Finder window to the Dock and drop it right on top of the Preview icon. Don’t be afraid! As you can see, Preview opens a window showing the Launchpad icons. You can do this with any app, just drag it onto Preview in the same way. If you look in the thumbnails in Preview, you’ll see there’s actually 10 versions of the same Launchpad.app icon – these are ten different sizes for various display needs. And that was what I wanted to explain: a single .icns file is actually a composite of ten .png files, of different sizes from 16pixels all the way up to 1024pixels, and is known as an ‘iconset’. Hence, the file extension ‘icns’ (and not ‘icn’), with the ‘s’ for ‘set’.

3. Create and name the required .pngs
Our next step then, is to use Preview to create our own iconset – all the required sizes and with the correct names so that Mac OS X will understand what to do with them. This is actually the most tedious part of the process and you must be careful to carry it out exactly or your final product won’t work. However, as I said earlier it’s technically fairly straightforward, you just need to take care to do it correctly. So, follow the steps in this order:

i. Create a new folder on your Desktop called ‘iconbuilder.iconset’ (without the quote marks). You will get a warning message from Finder like this:

Ignore the warning and choose ‘Add’ (your folder will display just fine!).

ii. Open your image in Preview. In the Taskbar, click the little pen icon on the right-hand side (the one nearest the search bar). Notice the new toolbar that appears underneath. Looking at that, choose the button on the far right, the double-headed arrow in a box.

This will open a new dialog box. Click ‘Custom’ in the first drop-down menu, and change ‘percent’ in the Width & Height to ‘pixels’. Unless you created your own image on a 1024×1024 or other square canvas, uncheck the ‘Scale proportionally’ box, and type ‘1024’ in both the Width and Height boxes. You can leave the resolution setting to whatever it is. Notice in the bottom half of the dialogue box there is confirmation of both the new pixel size and the file size in Kb. Review the information and press ‘OK’.

iii. This step is important – throughout this process, we do not want to save the source file we’re working on – we’re going to be using the (thankfully) re-introduced ‘Save As’ feature. You can either do this manually or use the shortcut ‘Command-Shift-S’. Press that now, rename the file as:

icon_512x512@2x.png

It’s vital that filename is correct and exactly the same as printed above (notice that its a 1024×1024 file, but it’s called 512×512 with the @x2 indicating ‘double 512’). Once you’re sure you’ve got it right, save the file to the iconbuilder.iconset folder we created earlier.

iv. OK, back to Preview. Click on the resize button on the far right of the toolbar again. Change the dropdown menu from ‘pixels’ to ‘percent’ – every file we’re going to create now is exactly 50% the size of the last one. Also, we now want the ‘Scale proportionally’ button checked, so click in that box, then type ’50’ in the ‘Width’ box and hit the tab key. If you checked the ‘Scale proportionally’ button as mentioned, the Height will automatically change to ’50’ too. Confirm from the bottom half of the dialogue box that your new image size is 512pixels and hit ‘OK’. Again, use ‘Save As’ (Command-Shift-S) and this time rename the file as:

icon_512x512.png

Again, save it to the ‘iconbuilder.iconset’ folder.

v. For this step, we’re going to need to go to the iconbuilder.iconset folder and right-click on the file we just made. Hit ‘Duplicate’ and change the name of the copy to

icon_256x256@2x.png

vi. And you’re going to continue on like this – using Preview to reduce the file, then duplicating those files that need a @2x extension. Here’s the full list – you should have ten files in the .iconset folder by the time you’re done. Notice that there’s only one file that is 64kb and it’s only for the Retina display.

FILENAME (= actual image size in pixels)
icon_16x16.png (= 16 x 16)
icon_16x16@2x.png (= 32 x 32)
icon_32x32.png (= 32 x 32)
icon_32x32@2x.png (= 64 x 64)
icon_128x128.png (= 128 x 128)
icon_128x128@2x.png (= 256 x 256)
icon_256x256.png (= 256 x 256)
icon_256x256@2x.png (= 512 x 512)
icon_512x512.png (= 512 x 512)
icon_512x512@2x.png (= 1024 x 1024)

4. Convert to icns
OK, I’m going to assume that you’ve double-checked that all your file sizes and file names are correct and you’re ready for the next step. For this one, open Terminal.app and copy and paste this command into the Terminal window:

iconutil -c icns ~/Desktop/iconbuilder.iconset

If you got all those filesizes and names correct, you should just see the prompt come straight back. Did anything actually happen? It sure did – go look on your Desktop, there’s a new file on it called ‘iconbuilder.icns’. If you click on that file and open it in Preview, you’ll see it’s just like the Launchpad.app one we looked at earlier (i.e., it contains all 10 images). Congratulations – you just made your first icns file!

5. Insert the file into the application and rename it
But we’re not done yet because we still need to insert this file into the Application, rename it and get Finder to load it.

i. Go to your applications folder in Finder, and click on the app once. Then, hold down the ‘control’ key and click on it again. Choose ‘Show Package Contents’ and navigate to the ‘Resources’ folder.

It will be useful if you switch to ‘icon’ view here (the left-most ‘View’button in Finder’s task bar, with four small squares). There may be a number of icns files in here, and different apps will call the one we want by different names (it may be named after the app, it may be named ‘icon.icns’, or ‘main.icns’ – as in LibreOffice – or something else entirely different). However, in icon view it should be easy to recognise – it will look like the icon you’re familiar with! If you’re in any doubt, double click it to open it in Preview and check that it contains multiple copies only of the same icon in different sizes (if you pick legacy software like LibreOffice that hasn’t been re-coded for Retina displays yet, you’ll find that there may only be a set of four icons instead of 10. No matter – you’re not only changing the icon, you’re actually making it more compatible with current macs!).

ii. Once you’ve identified the correct file, click on it once in Finder, hit ‘return’ on the keyboard and rename it by putting its initial letter in twice at the beginning. In other words, if the original is called ‘main.icns’, change it to ‘mmain.icns’, or if it’s called ‘snapshot.icns’ change it to ‘ssnapshot.icns’. There’s a good reason for using the same initial letter – it means the old icon will sit pretty close to – if not next to – the new one in Finder, which can be useful if you ever want to find it to change the app back to default.

iii. Once that’s done, go back to your Desktop and change the iconbuilder.icns file to whatever the other file was originally called (in LibreOffice’s case, that’s ‘main.icns’). Now move that file into the Resources folder of the app.

6. Initialize the file
OK, we’re almost done. You may notice that Finder and/or the Dock may start to display the new icon almost immediately, or not at all, or in some places you see the new icon and in others the old one. To make OS X see only the new icon and to unload the old one, go to Terminal.app and copy paste this command:

killall Finder; killall Dock

Press ‘return’ on the keyboard and it will cause the Dock and any open Finder windows to quit and relaunch. You should now only see your new icon.

7. Troubleshooting

My new icon isn’t displayed anywhere!
Check you gave the icns file the right name. Filenames are case sensitive so ‘SlipShod.icns’, ‘Slipshod.icns’ and ‘slipshod.icns’ are three different files. You must use the exact name required by the app. The correct name can be found in the Apps info.plist. To find that, do the ‘Show Package Contents’ trick again, and look for ‘Contents > info.plist’. You can open this with TextEdit or just Quicklook (click on it once and hit the spacebar). Look for the key ‘CFBundleIconFile’. The name listed as the ‘string’ is the correct name for your icns file. Remember, it’s case sensitive and it must be located in the Apps ‘Resources’ folder.

My new icon is displayed some places but not others in Finder/Dock
Be sure that you followed Step 6 to relaunch Finder and the Dock (or just restart your machine). If that’s not it, then you need to check the file names and sizes in ‘iconbuilder.iconset’. Looks like you missed a file, or got the wrong name or wrong size. Go through them till you find the one missing or that’s got the wrong size, or name. Correct the problem, then rebuild the icns file from Terminal and insert it into the app as before.

What if I want to return to the default icon?
Hopefully, that’s got you sorted. There’s only one other problem. What if your icon doesn’t look so good? Well, it’s back to the default in that case (delete your own icon and rename the original by taking the extra initial letter out of the name; relaunch Finder and the Dock), or it’s back to the drawing board and starting the process all over again.

Isn’t there a quicker way to do all this?
Yup! Take a look here.






OK, I’m not going to win any design awards, but it serves the purpose of illustrating this tutorial. I’m sure you can do better! Feel free to post links to your own re-designed icons in the Comments if you’d like to share. Enjoy! 🙂

Advertisement