Make a favicon .ico file in Photoshop CS4

favicon thingy

This is a quick guide on making a favicon in Photoshop CS4. A favicon is a 16x16px website-specific icon that was originally used to identify websites in a browser's site bookmark list. In most browsers today, it is displayed left adjacent to the url bar when visiting a site. First, you need to install a plugin that enables Photoshop to save files in the .ico format. It's provided for free by Telegraphics, and can be downloaded here. Select the version that's specific to your OS and/or Photoshop version. The plugin should be unzipped and saved to the "Adobe Photoshop CS4\Plug-ins\File Formats" directory. On Windows, the default location of this directory is:
C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats
Next, fire up photoshop and start designing the icon. It's best to start with a 64x64px or similar sized canvas, so that the icon can be proportionately scaled down to 16x16px. You must also have the following enabled in order to save in .ico format:Image > Mode > 8 Bits/ChannelImage > Mode > Indexed Color...When you've finished the design, scale the image size down to 16x16px:Image > Image Size...
  • Width: 16px
  • Height: 16px
  • Constrain Proportions: checked
  • Resample Image: Bicubic Sharper (best for reduction)
Then save as an .ico file:File > Save As...
  • Format: ICO (Windows Icon) (*.ICO)
If you want to setup the favicon for your website, save the .ico file to the document root, and add the following to your tags.
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">

Leave a Comment