How to create a website Favicon using Photoshop

The favicon.ico file is your website icon. It shows up next to the URL in the top of your browser, and next to the website in your favorites/bookmarks. It increases your visibility, and not using it will, in my opinion, make your site look a bit amateuristic.

Creating one is quite easy, as long as you have Photoshop. I’m using CS5, but older versions work as well.

1. To start, go to the photoshopcs5.co.uk website and download the applicable plug-in. In my case, it’s the Windows 64-bit version. It says CS4 only, but it works just fine on CS5. It works on both Photoshop CS5 64-bit and 32-bit (but use different plugin).

2. Unzip the file and copy the ICOFormat64.8bi file into your C:\Program Files\Adobe\Adobe Photoshop CS5 (64 Bit)\Plug-ins\File Formats folder (or whatever you’ve used as installation folder).

3. Start Photoshop. You will probably now see the option .ICO in both your “Open” and “Save as” file type pull down menu’s. If it’s not showing, don’t worry. This is because your file is not yet an indexed color image, which you will render later in this tutorial.

Note: There are restrictions to an .ico file. Its maximum size is 16×16 pixels, it’s maximum amount of colours is 256 (indexed color) and a resolution of 72 pixels. This is very small, so you need to keep the icon simple. Few colors and few details.

4. Open the image you want to use (for example your logo) and adjust it to a square form. You can either crop the existing file, or, if you don’t want to sacrifice part of your image, add space on the sides to make it square (I wouldn’t recommend this though, as 16×16 is already very small).

5. To crop, select the “Crop” tool on the “Tools” bar (usually on the left of your screen. If you don’t see it, go the pull down menu “Window”, and select “Tool”). You can pull a frame over the image by left-clicking with your mouse, and drag the mouse over the image(keep mouse button pressed while you drag). You can alter all sides before actually cropping. If you want to make sure you’ve drawn an exact square, open the “Info” menu (pull down menu “Window” –> Select “Info”). At the W (Width) and H (Height), you can see the exact measurements you’ve selected with the “Crop” tool. The “Info” tool looks like this:

6. To make your image square without sacrificing part of the image, enlarge your canvas. You can do this by going to the pull down menu “Image”, and selecting “Canvas size”. To add to the canvas size, enter the width and height sizes you want (for example 5 by 5 centimeters), and tell Photoshop where to add the size. If you want to add canvas to the bottom of the image, click on the arrow pointing upward (as shown in this screenshot):

So always click on the arrow opposite the side where you want to add space to your canvas.

7. Save what you have now as favicon.psd. This will allow you to go back to the image optimized but not yet downsized for favicon usage.

8. Go to menu Image –> Mode –> Indexed color…, and set the number of colours to 256 (the default value). No need to change anything else. Make any other adjustments you wish (usually to simplify the image).

9. Now you’re basically done! Now go to the pull down menu “Image: again, and select “Image size”. Enter the numbers as shown in the screenshot: 16×16 pixels width/height, 72 pixels resolution.

10. Save as favicon.ico file (don’t use “Save for Web and Devices”, it does not offer the possibility to save as an .ICO file).

11. The favicon.ico file is usually put in the root of the website folder structure. Using WordPress, put it in the image folder within your theme folder.

12. Enter the following line of code in the -head- section of your header:

<link rel="shortcut icon" href="images/favicon.ico" />

Refresh your page and you will see the logo popping up next to your URL!

13. Update: the method above is outdated. Nowadays, all browsers support PNG favicons, so it’s easier to create a 32×32 PNG 🙂