How To Create Icons for Mac OS X
Ever wondered how to make your own Mac icons? Have you ever created an icon and had trouble making the icons fully transparent? If you answer either of these questions with a yes, then this tutorial is for you.
To complete this tutorial, you will need Adobe Photoshop (or any other image editor that will export transparent TIFF files), Xcode and CandyBar installed on your Mac. Xcode is Apple’s free software development kit. You should be able to install Xcode from your computer’s install disk or download it off Apple’s Website. It’s also important to note that the newest version of Mac OS X, Leopard has moved to a maximum 512 pixel icon sizes. CandyBar allows you to organize your icons.
Designing The Icon
Designing the icon is up to you and your imagination. Here is a list though of things to keep in mind when designing your icon.
- Apple Human Interface Guidelines Apple has there own set guidelines and rules to which they expect icons to be created by.
- Plan Your Icon For Scale Like designing a logo, you need to be able to scale your icon from 16 x 16 pixels all the way now to 512 x 512 pixels with Leopard. For the 16 pixel icon you may want to take out elements. For example, for my RSS icon, I’m eliminating everything but the orange rss button.
- Leave Margins for Your Icon You don’t want one icon to outwieght the others because of it’s size.
Exporting The Icon
I’ve create an easy to use Photoshop Template just for mapping out each icon size. This way you don’t have to bother creating multiple size documents and what not. Simply drag and drop the icon layer(s) onto the template and the duplicate and resize according to each size on the template. At this time you may want to sharpen icons at smaller sizes to give them more definition. Remember: you can use Fade controls (located under the Edit menu) after using the sharpen filter.
Now that you’ve completely resized your icons and are ready to make them into an icon, hide the back drop layer. Then go to File >> Save As. You want to format the document as a TIFF file with the options, “Layers” unchecked and “As A Copy” checked. A TIFF Options dialogue box should appear after hitting the save button. It’s important to have Compression set to “None” and “Save Transparency” checked. This way, the icon comes out exactly as you intended.
Important TIFF Settings to getting the best looking icon
Now all you have to do is duplicate the TIFF file four / five times (one for each size), and crop the file to elimante all other icons. Knowing where to crop the documents should be simple because the guides still remain from the Photoshop document.
Using Icon Composer & CandyBar
Icon Composer is located in the Applications >> Utilities in the Xcode folder. Once you’ve opened the application, creating the icon is easy as dragging the TIFF files over their appropiate sizes. Agree to Extract Mask when asked. Save a fresh ICNS file. The icon shouldn’t yet appear as the actual icon on the document. This is where CandyBar comes in handy. Just drag the .icns file into CandyBar and then drag out the icon image show in the application.
Icon Composer is as simple as dragging and dropping the TIFF files on to its appropriate spot.
Exporting a TIFF, and not a transparent PNG file from the Export to Web menu proved vital especially when exporting transparent images. This particular icon, when made into an icon using an exported PNG file will cause the smoke coming off the RSS to pixelate. This pixalation is fixed though when exported a TIFF file with tranparency.
February 8th, 2008 at 12:50 am
you rock, dog!
February 12th, 2008 at 10:16 pm
nice tutorial – thanks for the template :)
March 5th, 2008 at 7:33 pm
I was trying to this very quickly and CandyBar just wasn’t doing what I expected.
I found icns2icon (http://osxiconeditor.phatcode.net/icns2icon.html) was super simple. Just drop the icns file on the icns2icon application. then get info on the icns file, copy the icon, and paste it on the get info icon of the destination file.
March 5th, 2008 at 8:01 pm
Thanks Dog, this was an excellent tutorial.
March 6th, 2008 at 6:04 am
Thanks this was an excellent tutorial! Two things to note:
1) I ended up using the application that Paul Fisher listed- icns2icon instead of candy bar. To me this was much simpler and straightforward. It worked like a charm.
2) The most recent version of icon composer has ditched the 48px icons that you list in your templates package. Furthermore, your Leopard template is missing the section for the 256px icon which the Leopard icon composer asks for.
This was a great tutorial on this- just wanted to offer some insights- thanks!
March 11th, 2008 at 2:21 pm
Good tutorial Dog. Many thanks! Clear explanation. It all went well, but I used icns2icon too.
Perhaps I sinned against holy rules, but I tried to simplify the procedure by only creating a 512 x 512 pixel doc., transparent, RGB, 72 PPI, in which I made my design, staying in the background layer. Then I did “Saved As” in TIFF, deliberately ignoring the Dog’s advise to make “Layers” unchecked and “As A Copy” checked, i.e. I checked “Layers” and checked “As a Copy”. Then I opened Icon Composer and dragged the new file over the largest size and saved. Finally I dropped the file on icns2icon. The result was an excellent icon, transparent as it should be. Also the Preview pane in the Get Info mode was large and sharp.
This way of working is really fast. It took me less than one minute to convert my design into a proper icon.
Any comments? I am always eager to learn. Thanx!
Greetings from Down Under.
May 11th, 2008 at 10:53 pm
This tutorial was great and really made it quite easy. I was having earlier troubles with RealBasic’s built in icon maker, but now I can just do it the proper way.
Thanks again!
July 2nd, 2008 at 7:34 am
Hi,
I’m trying to do some of my own icons, but I can’t find Icon Composer anywhere. It’s not in my Utilities, and I can’t find it using search on the apple website.
Can you help?
Thanks
July 2nd, 2008 at 1:45 pm
(y)
July 7th, 2008 at 7:55 pm
do you design the icon in photoshop?
August 2nd, 2008 at 8:09 am
can’t seem to get it! there is a page/template saved on the tiff file.HELP
August 8th, 2008 at 1:39 am
Hi, Thanks for the tutorial. hey, my icon is already finishes and I save it with tiff, but when trying to change my previous icon with the new one, it appears with background. how I can make it appear without background?
August 8th, 2008 at 8:15 am
great tut. set some up. icns2icon works well. Candy bar is good but less quick for this purpose.
Iaris: I recon you need to make sure you have transparency ticked in the tiff save dialog.
August 12th, 2008 at 8:15 am
The majority of the tutorial works great, but I can’t figure out how to “package” the icon so it can be sent via the internet; all icons I’ve dragged out of Candy Bar have been usable by me, but seen by OS X as folders and folders can’t be attached to e-mails or downloaded or used in any other way things sent across the internet can be used. A little hint that might help somebody help me is the fact that replacement icon packs I’ve downloaded show up as “Type: Mac OS Icon File” through the “Get Info” option, whereas mine show up as “Type: Folder.”
August 17th, 2008 at 6:49 am
That happens because those packages are simply folders, like an iPhoto library is.
Icon Composer, and icns2icon save an icon (in different sizes) in a file which can be sent through Internet.
October 29th, 2008 at 3:12 am
Hmmm… Couldn’t seem to find Icon Composer. Oh well.
November 2nd, 2008 at 2:05 pm
Good tutorial. I just accidentally skipped making an .icns file through Icon Composer and placed the .tiff file directly into CandyBar and it worked perfectly. Apparently there is no need to go through making it an .icns file.
So just place the .tiff file directly into CandyBar- it worked for me.
November 2nd, 2008 at 2:08 pm
Good tut dude. I just accidentally skipped the Icon Composer step and placed the .tiff file directly into CandyBar. It worked perfectly. I guess there is no need to make an .icns file.
November 5th, 2008 at 8:47 pm
For those finding it hard to locate the Icon Composer – You’ll have to insert your OS X DVD, the installation disc, go to “Additional Installations”. I think XCode is in there somewhere… Install that, and only then will Icon Composer be available.
It doesn’t install standard, because not all OS X users use the Developer Tools.
Great Tutorial!
December 10th, 2008 at 9:53 am
Very nice and easy tutorial. I’m going to delete all the bull poo that I found online that export the resource file to create the icon. This is exactly what I’ve been wondering and looking for. 512×2 px!!! :-) Thank you!
December 18th, 2008 at 7:21 pm
Thank you so much for this tut.
But I don’t know what is wrong with the way a do to create an icon (a followed all the steps) he assume that I created an icon but when I open the info window, instead of the icon, their is a blanck paper….
what’s wrong with me??? :D
Greats from portugal!
December 26th, 2008 at 9:22 pm
nice post dude. i will create icons with your trick
http://freeicon7.net
January 7th, 2009 at 2:24 am
I’ve been looking for this tut for a very long time! great work dude and many thanks. :D
January 17th, 2009 at 9:02 am
Hi there, I came across your tutorial and thought you might like this online utility I’ve created to dramatically simplify the process of creating icons for mac OS X – I’ve called it iConvert
http://www.eisbox.net/iconvert/
Let me know what you think,
-Mathew Eis
February 8th, 2009 at 5:44 pm
Hey, nice tutorial
But I read that you can also use icns2icon instead of CandyBar. And it seems that this application doesn’t work…
I can open the program, but nothing appears. And the program doesn’t react when I drag and drop the icns-File into it. Does anyone know what I am doing wrong?
February 26th, 2009 at 11:10 am
Thank you Tutorial Dog, and thank you Paul Fisher for that added tip. You’re right – icns2icon is the way to go! Just made a test icon and it worked perfectly.
March 5th, 2009 at 12:45 am
Thanks for the info. I did the same as Richard (11/2/08) and dropped my (128×128) TIFF directly into CandyBar (bypassing IconComposer), which then let me export as an ICNS file. Cheers from LA.
March 11th, 2009 at 12:00 am
Thanks for the tutorial. It was very helpful.
March 12th, 2009 at 5:00 am
how to create a OS
April 9th, 2009 at 3:10 pm
hello
everything works well for me except when i try to drag and drop the file with my customized icon into the dock … the default mac icon appear whereas my icon is like i’d want when the file is on the desktop …
anyone else has this problem ?
any solution from somebody ?
thanks a lot everybody
July 2nd, 2009 at 2:53 am
Mathew Eis-
You and your iConvert are a godsend!
Man, sometimes the world is a fun place!!
thanks!!
Tony
Check out his converter at http://www.eisbox.net/iconvert/
July 7th, 2009 at 9:55 pm
Nice tut’.
Thanks a lot.
July 8th, 2009 at 7:32 pm
I’ve not had the success I read others have had.
First of all, I downloaded the XCode software and installed it, and not where can I find
Icon Composer anywhere?
Thanks, please send replies to:
fab4bear@mindspring.com
Thanks
Jim Myers
July 23rd, 2009 at 1:09 pm
[...] Source a2a_linkname=document.title;a2a_linkurl="http://macciti.com"; [...]
July 28th, 2009 at 6:31 pm
I had trouble with the finished icon looking like a default page too, must have played with it for over an hour! I had better luck with http://www.img2icnsapp.com/, the free version took a layered PSD and cranked out a perfect icns. Very easy.
August 15th, 2009 at 1:14 pm
You can also directly drag a transparent 512×512 tif file to candybar, no need to double / tripla your effort. Much faster and easier…
peace
September 21st, 2009 at 7:17 am
[...] How to Create Icons for Mac OS X [...]
October 5th, 2009 at 9:24 am
[...] How to Create Icons for Mac OS X [...]
October 28th, 2009 at 6:25 am
[...] October 28, 2009 by TG [...]
November 3rd, 2009 at 12:24 pm
[...] How to Create Icons for Mac OS X [...]
November 29th, 2009 at 4:20 am
Thanks for the great article. I found this if you want a free version to covert your .icns.
http://iconverticons.com/
February 19th, 2010 at 12:11 am
You have a typo. You say “because of it’s size.” but that should be “its” with no apostrophe. Possessive pronouns are unusual in that they have no apostrophe of possession (cf “hers, its, yours, ours, theirs”.
March 11th, 2010 at 11:50 pm
I’m trying to find out how the icon for a safari plug in can be changed. Folders, documents, and programs are easily changed with the cut/paste command. However the plug-in file is locked and doesn’t provide a way to change.
Does anyone have an idea how to change a the finder icon of a plug-in?
June 8th, 2010 at 6:48 pm
Brilliant! Thanks for the psd template. I used Img2icns and it worked a treat!