Create Mac OSX Folder Icon

Okay, on your computer you have icons which are little picture representations of things.  In this discussion I will talk about those little pictures that look like Folders.  Here's a plain default folder icon for mac next to the Library folder icon:

Okay, so here what most people do not realize; each icon is an icon set.  That is, there are 5 different images in each icon.  Why?  Because you can choose adjust your icon size.  Some like them big, some like them small, plus, as screen sizes get bigger an resolutions get better, you need larger better quality icon files.  When you are looking through a large list of files, it's usually easier to view your files like this, and can click on the arrows so see a drop-down of the files inside:

See the little icons.  These are the 16x16 pixel size icons, the smallest.  The blue folder above, is the medium sized 128x128.

Can you see a discrepancy between the folders?  If you're like me, you've spotted it right away.

Lets take this folder and scale it down to 16x16.  Compare it to the "E-books" folder above.

When you scale images down, they lose a lot of their detail.  Take this default "Library" folder for example in the 128x128 icon size:

Do you see the difference between the 128 size and the 16 above?  Let's shrink it.  See the loss in detail if you merely shrink it?  What on earth is that blot on that little folder?  See, I decided to use another folder icon for my "Games" folder.  Can you make it out above?  It looks like this when it's larger:

See, someone used one of the many icon maker programs on the internet to copy and paste their icon image, and all that happens is that the original image is auto-shrunk/scaled into the smaller sizes, and thus, detail is lost.  But the people that make the Mac computer software create different images for the smaller icons in order to keep them clearer at smaller sizes such as the 16x16 library folder icon:

See the difference?  The system folder (left) is now outlined in dark blue, squared off into a rectangle, the columns are not 3 rather than 4, no more dot in the triangle, and so forth.  Let's enlarge it so see how it has been simplified:

So, I thought it would be neat to make my own folder icons.  It's pretty simple.  Make an image in a png image format with a transparent background in a 512x512 size (current largest size used on computers) and copy and paste it, or use img2icons or other software.

I got one of those folder icon making applications (Icon Composer can be found for free on your Mac install disc) and wanted to be like the professionals and make a different image for the 32x32 and 16x16 sizes.

There they are.  Not perfect, but looks good enough compared to a faded fuzzy looking little rectangle made with the auto-shrink.  Using Icon Composer I save it.  It saves the file as an .icns file.  So, each of the different sizes I've saved in the file.  Okay, now to apply it to my games folder.  Hm.  How do I do that?  I search the net.  Nobody seems to know how to do it.  They DO know how to extract the images from an .icns file and copy and paste an image to a folder icon, but, that merely auto-shrinks.  I want to do it the way the system folders do it -- different images for different sizes.

Normally you would use img2icns or similar program apply their image to the folder, but that only works when you are using ONE image file and want to auto-shrink it to the smaller sizes.  Sometimes this works fine depending on what you want, but not for this instance.  I want my folders to look the same as the system folders.  I tried various programs, they all auto-shrink.

This is where I'm stuck.  [jump to end for solution]. And, I just noticed something else.  There is an additional 16x16 image for many folders. If you drag and drop an icon onto your sidebar if you use if often... have a look:

Games folder icon auto-shrunk

Games folder icon with custom-16x16-icon

See, the Desktop, Pictures, and Music folders have additional full-colour 16x16 icons for the sidebar!  How do I do that??!! But I digress!

Here's a good explanation of why all these different sizes are needed:

http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes

Getting closer to an answer?:

http://davidchambersdesign.com/customizing-file-and-folder-icons-in-mac-os-x/

https://discussions.apple.com/message/3712059?messageID=3712059

I found an old program that does the trick: Iconographer.
Just open your .icns file, then choose Save Into File, and select the folder who's icon you want to replace (and choose to correct the masks).  Works!  Buuuut, the largest it supports is 128x128.  But, I never view my folders at 512x512 - that's huge, why would I need the to be that huge?

Okay, that will do for the moment until I find a (free) solution.

So, I was told that CandyBar is an icon making app that will apply .icns files to folders etc.  I tried it.  It does.  But, it is a paid program with a free trial period. 

Nonetheless, I used it, and it works with a drag and drop method.  The program is pretty 'busy' looking and not quite at user friendly as it would seem for such a small and simple program.  I had to watch a video tutorial to find out how to do it.


When making my 16x16 sized icon, the result was not coming out as I'd like it to, that is, looking like a regular system file.  I found that using a default 16x16 folder png file as a background had too much visible degradation or resolution loss at such a small size.  With the larger icons, such is not as noticeable.  So, I re-drew the icon of the default 16x16 file folder.

The image on the right is the original png with vector circles drawn on top.  Once exported as a png and thus rasterized (changed to pixles, yet again) the circles look a bit more blurred and melded together into each other and the border.  I re-drew it in a vector with a 1px drop shadow at the bottom (10% of black), adjusted the mouth opening and spacing.  You can preview your raster (in Illustrator) without exporting it by applying the Effect - Rasterize, which can then be turned on and off in the Appearance Window pane, which will allow you to adjust your spacing, colours, etc. so they look as they should and not blended together or too light/dark, etc.  My pac man is more oval, the mouth more beaked, the dots more squished into ovals as well.

Okay, just one more question now, "How do I create my own SideBar Icon?

LiteIco: http://www.freemacsoft.net/LiteIcon/

Iconographer (free oldware): http://www.mscape.com
Works, but  maximum icon size: 128px

CandyBar: PaidWare (free trial): http://www.panic.com/candybar/
Maximum size: 512.  Not very intuitive.

Icon Composer: OSX system app (free):  found on install disc or: http://developer.apple.com/xcode/
Creates .icns files from your icon art you created in a drawing program, or photo, etc.

Img2Icons app (free): takes any image, drag and drop onto any folder or app to change icon. http://www.img2icnsapp.com/
One image is used to auto-create all of the icon sizes. Easy to use.

pic2icon, icon2png, icns2icon, icon2icns, icon2ico (all free): http://osxiconeditor.phatcode.net/index.html
All are limited to maximum 128x128.

I had the simple solution all along!!!! for applying the icns file to a folder.
**IconDroplet** (free): http://web.me.com/zweigand
It was not working when I first tried it, but I noticed the "IconDroplet for Tiger (10.4)" folder, and used the alternative app found in there, and it works! I wrongly assumed that it was meant for the pre-10.6 OSX, but realized that the program had not been updated in awhile and was meant to be used for 10.4+.

Drag and drop your .icns file onto the doc icon, and it will create an .app on your desktop using the same files and name of your .icns file.  Super simple.  You can now do the old Get Info, select icon at Top-Left, Cmd-Copy, and select the destination icon in the same way, in the Get Info window, and Cmd-Paste.  It will Copy-Paste the entire icon set, with each custom size.  Other programs do not copy-paste the entire icon set.