How to Make Icons with Photoshop

If you want to learn how to make icons with Photoshop, the first step is to tone down your creative tendencies. Those amazing three-dimensional effects you're used to creating simply won't hold up as a favico or a 32-pixel by 32-pixel image. In fact, they often get in the way, making your icons look busy and confusing their meaning.

What Are Icons?
Icons are a form of visual language that communicate meaning in a symbol. We're all familiar with the up and down arrows on elevators and remote controls, as well as the tiny house icon that sends you back to the home page on a Web site. At a glance, a good icon will tell you what something does or why something is important. This is the main reason why icons need to have simple, uncluttered designs. A few lighting effects might provide a three-dimensional pop, but too many will obscure the icon's meaning.

When you're starting an icon design, it's a good idea to look at stock Web icons to see what others have done. As you look at those icons, note the simplicity of their designs and the high-contrast colors that are often used.

Creating a Favicon
Favicons are a great introduction to icon making, because they must be small and straightforward. When you're browsing the Web, a favicon will appear next to the URL in the address bar in Firefox and Internet Explorer, or in the tab in Google Chrome. It also appears next to the name of a site on a Bookmark or Favorites list.

To create favicons, you'll need a plugin that can export in the .ico format used by Web servers. A good free plugin for Windows and Mac can be found at Telegraphics. This software can also be used to create Windows desktop icons.

There are a few rules to follow when creating a favicon:

• Create shapes on a white background. If you want your favicon to have a unique shape, remember that it will appear on a pure white background in Web browsers, so it needs to be built on a white background.
• Avoid aliasing. Your finished favicon will be 16 pixels by 16 pixels. That's not much space, and you don't need aliasing at such a small resolution. You can use aliasing on the larger image that you scale down.
• Limit colors. One or two high-contrast colors will have a much larger impact than a rainbow of shades. Favicons aren't about subtlety, they're about impact. Adobe's favicon only uses one color. MSN and NBC have shrunk their multicolored logos down to favicon size successfully, but most designers would do well to use fewer than three colors for their icon designs.
• Strip the effects. If you've got a logo with elaborate 3-D lighting and shading effects, remove them from the image before you shrink it. Those effects can distort the image and make it hard to see at the 16 x 16 size. Imagine that you're back in the days of 8-bit, two-dimensional graphics.
• Use Web-safe colors. The default for favicons is 16-bit color, which doesn't support transparency. Designing with the Web safe palette will prevent unpleasant surprises when you convert your image.

Creating a Favicon

1. Open a new document in Photoshop. Set the background to white (unless you're creating a solid-color block) and set the color mode to RGB, 16-bit color. Keeping in mind that the final image size will be 16 pixels by 16 pixels, use a multiple of 16 to set the canvas size. You can use 32 by 32, 64 by 64 and so on.
2. Design your icon. If you want to try a simple experiment, pick a Zapf Dingbats character in a bright color, and center it in the canvas.
3. Resize the image to 16 pixels by 16 pixels.
4. Using your plugin from Telegraphics, save the icon as favicon.ico, which will appear as Windows Icon in the Format dropdown menu. Note that you must use this name for your favicon to load into Web browsers. You can't change the name or add numbers to have multiple favicons; you only get one per site.
5. Upload the icon to the root directory of your Web page. It needs to be in the same place as your home page's index.html page.
6. Open your home page in a Web browser to see the new icon. You may need to clear your cache to see the icon.