How To: Create Custom Icons for your Mac

Posted by Alex Galonsky on 04/21/07 in Applications, Development, Fun & Unique, Graphics, Organization

photoshop icon Have you ever wanted a custom icon for a hard drive or folder? I have, and I found out that it is easy to do, even if you can’t make an icon from scratch. For example, I got tired of seeing the default white removable drive icon whenever I plugged in my CompactFlash reader. I decided to make a custom CompactFlash icon to use instead.

Note: Their may be simpler, even easier ways to do this but this is how I do it. Comments welcome.

Step One: Making the Icon

For this example, I used an image that I found on Google Images. If you do the same, make sure your base image is at least 128px by 128px. You could also draw your own icon if you are a Photoshop whiz. Anyway, once you have your image, open it in Photoshop or a similar image editor and eliminate the background by deleting it. You just want your subject on top of a transparent background. Now you might want to add a subtle drop shadow if you want, since most icons do. When you like how your icon looks, resize it to 128 x 128 and save it as a PSD or a PNG.

Step Two: Converting the Icon

If you don’t have Apple’s Developer Tools, you will need to install them in order to complete the next step. You can find these tools on your Mac OS X install disk, or Apple’s website.

The tool that we will be using is Icon Composer, which can be found in /Developer/Applications/Utilities. Open Icon Composer and drag your PSD or PNG into every box. For the upper boxes, it will ask you a couple of questions. Always tell it to Use Scaled Version and Extract Mask. Once all the boxes are filled, go to File > Save As and save the icon in a convenient place.

Icon Composer leaves us with an ICNS file, which is almost usable. We now need to convert the ICNS to a RSRC file, which can be easily done with Icns2Rsrc. Just open the app, open the ICNS file, and it will ask you where to save the RSRC.

icon composer

If you know how to change an icon in Mac OS X, you know what to do now. If not, it is really easy. Open the Get Info window for the RSRC icon, click on the miniature icon in the top left and press Command C (copy). Then, go to the drive or folder that you want the icon to be on, open the Get Info window, click on the mini-icon and press Command V (paste). Now you should have a perfect custom icon.

del.icio.us tag this | digg this | permalink | ping

43 Comment(s)

Legend:

Guest

Article Author

Contributor

Marvin Sum said on

April 21st, 2007 at 7:17 am

Interesting, how did you manage to change those 3 buttons on the left side of the titlebar?

-2

Andreas said on

April 21st, 2007 at 8:47 am

Thanks for the great tip! I’ll be doing this for my external drives now I think.

Greg H said on

April 21st, 2007 at 8:50 am

@Marvin Sum It looks like he is using a ShapeShifter Theme.

Alex Galonsky said on

April 21st, 2007 at 10:16 am

Yep, Shapeshifter theme. Carbonite to be specific.

Dustin Schau said on

April 21st, 2007 at 12:38 pm

This is a method I have truly never heard of, but I have a similar method.

Icon Composer is better if you would like different icon(s) at smaller sizez, but if not I reccomend img2icns. All you do is drag the .png or .tiff file onto the dock icon, and it will output a .icns file (from 128d128 all the way down to 16×16).

Now, this will give you the .icns file in a somewhat similar method as the method posted by Alex, but again, what I do next is different. Instead of using icon2rsrc, I reccomend using IconDroplet. You drag the .icns file onto the icon, and it will output a .app file which can be copied (then deleted) and pasted using Get Info onto the application, or any other icon that you wish.

Also, on a somewhat similarly related topic, if you have ever wanted to get a 128×128 png (or any size for that matter) from an Application, Hard Drive Icon, Folder Icon, etc. I reccomend IconVerter. It does the job perfectly.

Great post, but I just do things a little differently!

TonyInBatavia said on

April 21st, 2007 at 2:50 pm

Thanks so much! I love it when someone helps me use the software tools that came with the computer, especially when they are tools I didn’t even know I had! The process you outlined could not have been easier.

Now I think I need to explore the other development tools in that package!

Thanks, again.

-1

Miles Evans said on

April 22nd, 2007 at 1:55 am

@Dustin: Great tip on IconVerter!

Devin said on

April 22nd, 2007 at 3:50 am

apple now wants 512×512 icons, fyi

BroceBeats said on

April 22nd, 2007 at 5:03 am

or you can just use pic2icon

Martin Leblanc said on

April 22nd, 2007 at 6:33 am

Great tip, thanks!

-1

Ben Dunkle said on

April 22nd, 2007 at 8:42 am

Iconographer is a good tool for this:
http://www.versiontracker.com/dyn/moreinfo/macosx/11842

-3

Alex Galonsky said on

April 22nd, 2007 at 10:52 am

thanks for the tips dustin!
I will have to try those apps.

Geoff said on

April 22nd, 2007 at 3:23 pm

Let’s see.. a free app included with the Developer Tools or download and pay for some shareware app that removes a step from a super simple and quick 4 step process? Hm. Nothing against shareware (and the many quality shareware OSX apps available) but in cases like this there’s no reason to go with something else. Yes, if one doesn’t have other reasons to install the Developer Tools *then* there would be reason to install the smaller and (hopefully) cheap shareware but I’m considering only folks who have the Developers Tools already installed for other reasons in my comments.

Yuzle! said on

April 22nd, 2007 at 4:03 pm

I am so untalented with this ish, and even I could make a icon for my fancy lego brick HD.

Alex Galonsky said on

April 22nd, 2007 at 5:37 pm

@Yuzie!

I have a fancy lego brick HD too!!

subcorpus said on

April 23rd, 2007 at 2:38 am

neat trick …
will try do it on my own …
hehe …

TheMacthinker said on

April 25th, 2007 at 4:15 am

Here is also a great article on how to customize your icons…
http://www.mostofmymac.com/articles/customizing-your-icons/

-2

TheMacthinker said on

April 25th, 2007 at 4:16 am

Another article on how to customize your icons…
http://www.mostofmymac.com/articles/customizing-your-icons/

-3

iSpork said on

April 26th, 2007 at 12:23 pm

Brilliant guide - thanks!

-1

tarun upadhyay said on

April 26th, 2007 at 1:12 pm

May be I am missing something but I do not think you need these tools. When I created icon for mounting my blackberry pearl - this is what I did.

1. search google images to find a large image of blackberry pearl (size does not matter)
2. do copy on image (apple-c)
3. do get info on my mounted blackberry pearl generic icon.
4. do paste (apple-v) after selecting the icon image in the get info window.

see, no tools needed !!

what am I missing?

D said on

April 26th, 2007 at 4:12 pm

You’re missing transparency?

-1

Fritz said on

April 26th, 2007 at 8:30 pm

I just spent a few minutes creating icons for all my external drives, and it was quite easy. I didn’t have Photoshop, but Graphic Converter did the trick.
Thanks for the fun tip!

-1

shayes said on

April 26th, 2007 at 9:43 pm

you could download FastIcns..it’s free and the interface is a cool, floating 3d cube. after stripping the background from your image just save it to your documents folder then drag that file into the cube. select “copy as icon” from the edit menu and copy it over any existing icon. super simple!

-1

Motorcycle Guy said on

April 28th, 2007 at 4:29 pm

Great guide!

-1

ivatur said on

May 13th, 2007 at 4:08 am

Hi My Name Is ivaytf.

-3

K said on

May 19th, 2007 at 7:49 pm

Great tips, thanks. One question, I wasn’t able to use this method to replace the computer icon. The little imac-type icon is cute and all, but I was hoping to replace it with an icon that fits the name of my mac. Try as I might, this copy and paste method did not work. Is there another way to do it?

(subscribed to comments) Add karma

-2

scottsasonic said on

May 28th, 2007 at 12:49 pm

Ok, if you are using OS X 10.4.x , Icns2Rsrc DOES NOT work. It is horribly outdated last build from 2001.
USE
IconDroplet for the final output (after Icon Composer)! It’s so easy and just drag n’ drops!

-1

Michelle said on

August 14th, 2007 at 5:46 pm

Dustin Schau said on April 21st, 2007 at 12:38 pm:

“This is a method I have truly never heard of, but I have a similar method.

Your method worked like a charm. Thanks for the info, and such a simple way to take my original designs for icons and turning them into icons quickly!! Kudos…

(subscribed to comments) Add karma

-1

Tom Howes said on

August 29th, 2007 at 4:21 pm

Can any one please tell me how I can attach a url to an Icon.

(subscribed to comments) Add karma

-1

Macnologist said on

September 11th, 2007 at 6:59 pm

@ Tom Howes:

Go to the URL you want in Safari.
Drag and drop the favico (little picture next to the URL on the left) to your desktop to make a URL shortcut.
Get info on that and copy/paste your new icon into that URL shortcut file (as described above).

Now, when you double click on the fluffy bunny icon - you go to fluffy bunny dot com. Is that what you were looking for? Hope that helps.

Eka Kolour said on

October 21st, 2007 at 4:01 pm

it came out to be, that she wasn’t the girl for m. Eka Kolour.

-2

naisioxerloro said on

November 29th, 2007 at 4:41 am

Hi.
Good design, who make it?

eregilkibly said on

December 5th, 2007 at 7:24 pm

News365 - Nachrichten aus aller Welt. Sonntag. 02. Dezember. Home arrow News arrow Medizin arrow Zu viele Potenzpillen: US-Tourist stirbt beim Sex Potenzmittel und welche die es vorgeben eines zu sein Potenzmittel Rezeptfrei is powered by WordPress WP.de · Beitrage (RSS) und Kommentare (RSS). Erektion (lat. Aufrichtung), Anschwellung mancher Gewebe, besonders der Schwellkorper der Geschlechtsorgane, beruht darauf, da? deren zahlreiche Hohlraume sildenafil

-3

buy ship soma said on

December 10th, 2007 at 5:28 pm

buy compound soma buy cod soma

-3

penter said on

December 16th, 2007 at 2:09 pm

Why is it that the rsrc file that I’ve created has NO ICON?
for some reason the icon is just a blank paper…

I proceeded to follow Dustin Schau’s instructions, but the again, i ran into a problem.

I couldnt Copy+Paste the Icon into the file i want it to be on…..

could someone help,, please?

(subscribed to comments) Add karma

Bill said on

February 2nd, 2008 at 2:52 am

hochu vodki!.

-1

patricia Garvin said on

February 21st, 2008 at 1:14 pm

I have a question actually..this was all very helpful until the part of Icns2Rsrc.
I click the link and signed in to that site after getting a password. But when I downloaded the software from that site all i got is a long text in code. I have the new OSX version in my mac (don’t know if that’s a problem)
I cannot open any application when I go to my downloads box and tried to open what it downloaded. All I get is that text with codes.
Can you help me please? Anyone? or is there another software I could use to convert the ICNs file to RSRC?

(subscribed to comments) Add karma

Mark said on

March 19th, 2008 at 6:49 am

Here’s a very fast way to make ANY MAC ICON … if you have Photo Shop .. just take any photo, save as PIXAR … then GET INFO in the pixar file and there is you icon, top left .. copy and paste to another file as you like

(subscribed to comments) Add karma

Basti said on

April 20th, 2008 at 11:20 am

@K: it’s no big deal to replace the computer icon. Step 1: Just pick any icon of your choice (I used a b/w G3 icon), rename it to “iMac.icns”.
Step 2: Then go to /System/Library/CoreServices. You will find a bundle called “CoreType.bundle”. Open it via “Show Package Contents” from the context menu. Go further to Contents/Resources. Here you will find many of the standard icons MacOS X uses, also many classic icons. There is a file “iMac.icns”. You can replace it with the file from Step 1. I renamed the original file to “iMac.icns.backup”. Most important is that the new file has the same name.
Step 3: Close the package, log out and log in again or restart the computer so the Finder can read in all icon resources again.
Et Voila you have your custom computer icon.
Sometimes a system update replaces this bundle and restores the original icon. Just repeat the whole procedure and you will have your icon again.

dave said on

April 21st, 2008 at 7:17 pm

I changed my mac hd icon and had a drive failure. Now since installing from the time machine backup, the custom icon does not show up on the desktop, just the default disc icon. The real problem is that the custom one shows up on refit when i start the computer and it absolutely will not let me change the icon (paste is grayed out even when the icon i want is in the clipboard). I can change others, but not that one. Does anyone know where the icon is now stored and how to change it?

f31924802073 said on

May 10th, 2008 at 3:34 am

f31924802073…

f319248020735fe11ffc…

-1

Usable Puddle said on

June 16th, 2008 at 6:40 am

Thanks for the help, I have used Photoshop to create a set of icons but when I use candy bar to change the icons they come at at 1/4 size. help!

I don’t know what i am doing wrong, my PSD’s are 128 x 128 yet every-time the icons are tiny!

(subscribed to comments) Add karma

Blair Allen said on

July 2nd, 2008 at 11:03 pm

Ok, I have a question. After I create a custom icon for a file, how can I make sure that it moves with the file, i.e, if I create a custom icon for a podcast, how can I make sure that the custom icon will be imbedded in the file and show up after downloaded?

I can’t even make sense of my question after reading it again. I’ll take answers and/or therapy.

Blair

(subscribed to comments) Add karma

Bosco said on

July 30th, 2008 at 2:05 pm

Very cool info. Simple and easy. That’s the way I like it. Thanks!