How to create a favicon icon with Photoshop

You've seen them on all the larger websites; these little custom made icons next the the website address in the address bar or next to the webpage in your bookmarks / favorites.

Above is some great examples on some good looking favicons

Before we get started

This tutorial requires Photoshop and a free plugin. If you don't own a copy of Photoshop, you can use an online tool for creating favicons as well.

Get the pluing required for Photoshop from Telegraphics, it's free.

Move the .8bi file you just downloaded in your Plug-Ins\File Formats folder and fire up Photoshop. Photoshop can now save your graphics as .ico files, which is needed to make favicons.

Your final graphic should be quite small, 16x16 pixels. We can get there by following a couple of approaches. Play around with them and see which one works best for you. Remember to work in RGB mode.

Creating the FavIcon graphic

If you want to use an existing graphic, the approach is quite simple. First make sure you have a canvas with equal width and height, then resize to 16x16 and check the result. Many graphics and logos do not look good in such a small size, so you might have to use small graphical elements from your site/brand

Manually creating your FavIcon

If you're of the artistic type and have a copy of Photoshop, you can try this approach as well.

1. You need to start with a canvas of 16x16 or 32x32 if you need more room
2. Maginify your canvas quite a bit
3. Select your Pencil Tool and make sure the brush size is set to 1.
4. Color each pixel seperately
5. Resize to 16x16 id needed

Saving your FavIcon

This step is easy:

1. Go to File->Save As
2. The .ICO option should be available in your file options, name it favicon.ico
3. Make sure you save it to the root web directory of your website, or make sure you move it there after the file is made.

That's it. For some browsers (*cough*IE), the page often needs to be bookmarked before the favicon will show up in the address bar.