Murphy Mac - Screencasts and Tutorials » Page 'Creating icns Icon Files'

Creating icns Icon Files

Share

icns filesIn a previous screencast we used Photoshop to make an image suitable for a folder icon in Leopard. Now we’ll turn that Photoshop file into an icon and apply it to the Finder folder.

It’s probably more steps than you might have guessed, but it’s very straight-forward once you have all the tools in place. Murphy installed the Developer Tools from the Leopard install DVD which include a utility called Icon Composer. The first step is to drag the Photoshop file we created earlier into Icon Composer. The icon is created in various sizes appropriate for Leopard and we export to an icns file.

The catch is that the icns file doesn’t use its own icon content as its icon. That sounds confusing, but when you see the file you’ll know it’s not right. The background isn’t transparent. But that’s no problem. Just drop the icns file onto an application called IconDroplet. A new file will be created that uses the icns file’s content as the icon.

From there, the process may be familiar. Open the Get Info panel for the file created with IconDroplet. Select the tiny icon in the top left corner and hit Command-C on the keyboard to make a copy. Then open the Get Info Panel for a the folder or file that needs a new icon. Select its tiny icon and hit Command-V to paste it in. That’s it.

If you’re confused Murphy slapped a screencast together. For a general look at changing icons on files there’s an old post on the subject too. But keep in mind, using an icns file is the way to go for best results in different Finder views, like Cover Flow.

Watch Now | Permalink

10 comments to “Creating icns Icon Files”

  1. Wah! It won’t work! I get a black box in coverflow with no data shown! Followed all the steps. Went from Photoshop, to IconComposer to IconDroplet and nada. The icon shows up and it works, but in coverflow it won’t work on a folder. As an icon it works in coverflow (before I paste it onto the folder) but after that coverflow won’t show it properly! What am I doing wrong here!?

  2. When you say it works in Cover Flow, you mean the file that gets created by IconDroplet shows up properly in Cover Flow?

    If you delete the icon from the Get Info for the folder does the folder go back to working right in cover flow?

    Not sure what else to try. Repeat the process? Did you use the Photoshop template I linked to?

  3. Yes upon deleting it, it returns to a normal blue folder. I didn’t use YOUR template but I pasted a working transparent PNG into IconComposer and it had no issue exporting. I saved it from Photoshop to a PNG (for transparency and alpha) and like I said, no issue. I didn’t use your template but its no different as a result. Your tutorial skips the saving step. Are you using a tiff? What are you using as an imported file for icon composer?

  4. also ps – it should be noted – after I drop the composed Icon set into IconDroplet, the Get Info and Icon information for the file created is a file with a “CIRCLE X” on it – as if it is an unopenable file. Copying and pasting that does change the folder icon appropriately but does not still work in CoverFlow. Strange.

  5. Wow I fixed it. Do not DROP icons into icon droplet. It says they are finished but it skips a final step in its script. You need to open up IconDroplet and CHOOSE the ICNS. THanks for your time =)

  6. Excellent – glad you got it worked out!

  7. Thank you so much!

  8. I found an easy way to do this
    Save your 256×256 file as a jpg
    then just steal the preview icon using the info menu, and paste into the file that you want. Seems to work fine, but then I don’t really know what I’m doing

  9. This falls apart for the 16 pixel sized icon which is a squared off 2D folder and not a shrunken version of the 512 pixel icon…

    trying to figure out how to work that in…

  10. I was running this app a number of times, trying to figure out why it wasn’t working. Then I realized no matter where the source file is, it will output the .App folder onto the desktop.

Leave a comment