Creating custom icons by Matt Ottewill (2002)

Making your own icons for your CD/DVD-ROM delivered web site, Director projector, Flash application or whatever is an important finishing touch. This page includes a discussion of icons and advice on how to create your own.

The easier way ...

Buy IconBuilder, the PC and Mac icon creation Photoshop and FireWorks filter for Mac OSX, from www.iconbuilder.com. It will help you create an icon graphic file (which contains the 4 standard icon sizes) and save and attach it files. It costs $80 but is well worth it if you regularly make icons.

Useful resources

If you don't want to go the IconBuilder way, here a few useful links to begin with ...

Tutorials

axialis.com/tutorials/ Icon making tutorials
www.aha-soft.com Windows icons making how-to guide
msdn.microsoft.com Microsoft's icons making how-to guide
www.resexcellence.com Mac OSX icon stuff
www.widgetwidget.com Superb Mac OSX icon collection

Software

www.iconfactory.com Resources for icon makers
Axialis IconWorkshop can make icons for PCs and Macs.
www.download.com Windows icon making tools
Icon Lover Windows icon making tool
GraphicConvertor (Mac) can convert any bitmap image into a Windows .ico icon file. Find it here and here.
Iconographer (Mac) Makes Mac icons.
Photoshop.The one and only. Use Photoshop together with a program like Iconographer and all bases are covered.

Iconographer

Iconographer (Mac) (shareware) is a superb program that allows you to do the following ...

Create icons of all types from scratch (Mac OS7/8/9, OSX and Windows 95/98/2000/ME and Windows XP)
Create icons from images created in Photoshop
Generate masks which allow icons to have irregular shapes with transparent backgrounds
Attach icons to files ("save into file")
Create self standing .ico OSX and Windows icon files

OS icon types and sizes

Pre Mac OS 8.5

32 x 32 & 16 x 16 pixels / 72dpi / 1-bit to 8-bit colour.

Mac OS 8.5 to OS9

32 x 32 pixels / 72dpi / 32-bit colour / 8-bit masks / file format = stored in files resource fork. (OS8.5 introduced a new size of 48 x 48 pixels which cannot be used by the Finder!)

Mac OSX

128 x 128 pixels / 72dpi / 32-bit colour / 8-bit masks / file format = .icns

Windows XP

48x48, 32x32, and 16×16 pixels / 72dpi / 24-bit colour + 8-bit masks (32-bit) / file format = .ico

Each Windows XP icon you create can contain these three color depths to support different monitor display settings ...

32-bit (24-bit with an 8-bit alpha channel mask)
8-bit (256 colors) with 1-bit transparency
4-bit (16 colors) with 1-bit transparency

For modern XP systems (Pentium 3 and 4) 24-bit will do.

If you're going to create multiple icons for different systems create your icon at the biggest file size you need and then create copies at different smaller sizes. Always check by zooming out that your large icon will work at smaller sizes.

Where are icons stored?

This is tricky ...

MAC OS 7/8/9

Icons were stored in the resource forks of files. They were "attached" to the file.

Creating, changing and attaching OS8/9 Icons is covered later on this page.

MAC OSX

Icons are no longer stored in a files resource fork. They are stored separately in .icns files and linked or "attached" to files.

Some icons are system level. They are stored in a system file which is not available to the end-user and link with relevant file types (eg Application and System folder icons). You cannot change these.

Other non system files (folders, files, applications) can have their icons changed by the end user. Icons are stored in self-contained files with the .icns extension. You can search for these .icns files and then open one in Iconographer.

Creating, changing and attaching OSX Icons is covered later on this page.

Windows

Windows stores icons all over the place. Some Windows icon files (.ico) are grouped in collections and hidden in .dll files (shell32.dll is one). Some icons collections are used by the system and are hard to locate let alone change.

Windows maps many icons to file types and these relationships can be changed. For example all .jpg files will share the same icon but you can change it.

Other icons can be stored as self contained .ico files (not in .dll collections) and may be "attached" to files (eg folders, files, applications) by the end-user.

Creating, changing and attaching WIndows Icons is covered later on this page.

Expert stuff on Windows icons by Alistair Banks

Icons can be all over the place. All executables, .exe & .dll, and both of these even when they’re named something else, can contain icons in the resources. A Windows executable (.exe, .dll, etc) can contain all sorts of named & typed resource, and icons, fonts, bitmaps,strings, are just some examples

So what you’re talking about is how the shell associates icons with files and then displays them.

1st, the icons in executables come from the executable itself. If a file is a “structured storage” file, then the file has a hard type (a class) and the class is registered in the registry, and there’ll be an icon registered for that class, where the icon will be a numbered resource in a given executable. Then for “other” files, which include JPG, GIF, etc, there’s another section of the registry which file types with icons, again, found in resources in binaries. And there are some file types where the extension part doesn't’t uniquely identify what the file type is, and in that case there are mask/match pattern entries in the registry which lead to the identification of the type, which will then lead to the icon association.

And then, there are some special files, like links, which contain pointers to icons. So though a link isn’t in an executable format, it’s understood by the shell to be a special format, and a special piece of code is pulled in to get the correct icon. Links are only one such file type that’s special – others can be registered.

Creating Windows icons

Creating icon images

As with Mac icons, images to be used as icons can be created in Photoshop. There are several useful web resources for help in creating icon images including ...

axialis.com/tutorials/ Icon making tutorials
www.aha-soft.com Windows icons making how-to guide
msdn.microsoft.com Microsoft's icons making how-to guide

Suggested settings ...

48 x 48 pixels
72dpi
24-bit colour + 8-bit alpha channel mask (32-bit)

Creating icon files

Photoshop cannot directly make the .ico icon files that Windows requires. Therefore you will need to take your icon image files into a program that can. Such programs include ...

Attaching Windows icon to files

There are 4 ways to do this ...

1 If you are creating an icon for a Director Projector, use Director's Publish Settings>Projector>Custom icon for application file facility ...

2 Use a program like Axialis IconWorkshop.

3 Find the file whose icon you want to change and do this ... Right Click on it > Properties> Customise> Change Icon> Browse ... then search for and select the icon file (.ico) file you have previously made.

4 Use an Autorun file Click here for advice

Re-mapping Windows icons to file types

(Right click)Start > Explore > Tools > Folder Options > File Types > Advanced > Change Icon.

You can Browse for .ico files you have created and select these also.

Creating Mac OSX icons

Creating & attaching icons to individual Mac OSX files with Iconographer

Download the program and read the Help files! Its easy!
Click here ... Iconographer

Creating Mac OSX icons with Photoshop (or a paint program)

Create a new 128 x 128 pixels, 72dpi, RGB image file
32-bit colour is supported so use any colours.
As you draw and edit your icon, remember that end-users will rarely be viewing them at 100% (Mac OS and XP allow you to set smaller magnifications in windows) so regularly check your icons at 25% magnification to see how they look.
Its a good idea to leave a couple of pixels border round your icons to ensure they don't touch other icons when placed in the dock.
If you are going to add a Layer Style Drop Shadow to your icon, leave room for it.

You can either draw icons from scratch or convert any existing image and see how it looks.

Attaching Mac OSX icons to files

1 If you are creating an icon for a Director Projector, use Director's Publish Settings>Projector>Custom icon for application file facility ...

2 Use Iconographer's "Save into file" option.

Creating Mac OS 7/8/9 icons & attaching them to files

Creating & attaching icons to Mac OS 7/8/9 files with Iconographer