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.
Parameters you must respect
The .ico file format will only be available in Photoshop if you respect the following:
- Maximum file size 256 x 256 pixels
- RGB, Bitmap, gray-scale or Indexed mode
- 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:
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:
2. Fill with your background color (or pattern)
3. Add content
Best result with vector graphics, custom shapes, good fonts and such likes; just create a new layer and add …
Resize to 16px x 16px and resample selecting ‘Bicubic Sharper’:
We get now:
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:
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’.