How to create a Favicon with Photoshop

Create .ICO Files (Favicons) with Photoshop

The favicon or icon is part of the customization of a website. The favicons show namely in the browser tabs. Nowadays most browsers will also show .gif and .png icons; the .ico format is preferred by Internet Explorer.

A quick and easy way to create a Favicon is by using the online tool put at disposal by favicon.com. A better result can be achieved by editing the favicon in Photoshop; however Photoshop does not support the .ICO format in its native version. A plug-in can remedy.

Download and install the Plug-in

To start with, download the free Plug-in from Telegraphics.

Paste the plug-in file (ICOFormat.8bi, or ICOFormat64.8bi for the 64 bit version) in your Photoshop: …Program Files/Adobe/Photoshop/Plug-ins/File Formats.

re-start Photoshop.

Parameters you must respect

The .ico file format will only be available in Photoshop if you respect the following:

  1. Maximum file size 256 x 256 pixels
  2. RGB, Bitmap, gray-scale or Indexed mode
  3. Maximum 8 bits per channel

To save an image as .ico, use “save as” and select from the drop-down the ICO format.

How to Create an Icon or Favicon in Photoshop

Favicons are small icons, very small icons, since they measure only 16 x 16 pixels. Designing an Icon is a challenge since its display should be meaningful. To work more comfortably with your photoshop, start your design with a larger square canvas, a multiple of 16 pixels, for example 64 pixels, 128px or 256 pixels.

For the purpose of this exercise I will use a 128 px x 128 px canvas with the following presets:

Photoshop Icon Presets

You may save these settings as Preset for further use.

Best results are achieved if you keep your design simple and rich in contrast.

1. Open a new file with the above presets:

Icon Tutorial 1

2. Fill with your background color (or pattern)

Icon Tutorial 2

3. Add content

Best result with vector graphics, custom shapes, good fonts¬† and such likes; just create a new layer and add …

Icon Tutorial 3

4. Resize

Resize to 16px x 16px and resample selecting ‘Bicubic Sharper’:

Icon Tutorial 4

We get now:

Icon Tutorial 5

5. Save as .ICO

Now “Save as” (don’t use “Save for Web and Devices”) and select the ICO format. Rename the image to favicon.ico:

Icon Tutorial 6

6. Embed your new Favicon

Most browsers will find your favicon.ico automatically if you just load it into your website’s root folder (where the index.html is located), others are looking for a direct link to the favicon. To help these last browsers just add the following lines to your header (between the <head> … </head> tags):

<link rel="Shortcut Icon" href="/favicon.ico">

Load your favicon to the root folder of your domain and make sure it’s called ‘favicon.ico’.

That’s it.

Leave a Reply

Your email address will not be published. Required fields are marked *