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.

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 plugin 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, 16×16 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 16×16 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 16×16 or 32×32 if you need more room
2. Magnify 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 16×16 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.