Creating a favicon using Adobe Photoshop

A favicon, shortcut for Favorites Icon, adds a subtle touch of individuality to a website. It is a graphic which is typically displayed next to the website’s name in a browser’s bookmarks or address bar.

Most favicons have a dimension of 16 x 16 pixels, and use the .ico file format. Some newer browsers, however, already support .gif and .png.

  1. Download the ICO plugin for Adobe Photoshop at the Telegraphics website. To install, extract the file to your Photoshop’s file format folder. This is typically located at C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats

    Take note that you can use other tools to create favicons. I also use Microangelo and IrfanView. I have a personal preference in the Photoshop-plugin technique because of its flexibility.

  2. Using your favorite graphics program (such as Adobe Photoshop or Macromedia Fireworks), create a new canvas. It is recommended that you use a canvas size with a multiple of 16, such as 64 x 64 pixels.
  3. Create your graphic. Keep it simple, and don’t apply too much anti-aliasing.
  4. (Continued)

  5. Resize your graphic to 16 x 16 pixels. If you are using Adobe Photoshop, navigate to Image > Image Size, and enter 16 pixels in Width and Height. Next, to minimize blurring, select Bicubic Sharper from the drop down. Click OK.

    If the graphic looks blurry, experiment with the aliasing and the sharpening filters.

  6. It’s now time to convert your image to the .ico format. If you created your file in another graphics program, load it now in Photoshop. From the menu, go to File > Save As. The Save As dialog box will appear. Under Format, select ICO (Windows Icon) from the dropdown. In File name, enter favicon. Click Save.

  7. Upload the favicon.ico file in your web directory.
  8. In the web pages that you want your favicon to appear, include the following code between the <head> tags:
    <link rel="shortcut icon" href="/main/images/favicon.ico" />

    Make sure that you enter the correct path to your favicon in the code. For example, for this website, the following code was used:

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

29 thoughts on “Creating a favicon using Adobe Photoshop”

  1. I couldn\’t get my favicon to work in the main directory for some strange reason, but by putting it in the images folder and using the shortcut

    it now works perfectly.
    Thankyou very much.

  2. Hi, I do not have a save as ICO in my photoshop, I downloaded the plug in, and extracted it. How am I to install this? I still do not have the ico option to save as. Please help! Email me please

  3. All the download links for the Photoshop plugin file seem to be down, so I uploaded it here for all to download.

    DOWNLOAD PHOTOSHOP FAVICON PLUGIN HERE

  4. Thank you! Any suggestions on how to create a favicon bundle???? My favicon looks terrible on the shortcut on my desktop, it needs to be larger. I understand that if you bundle favicons this is resolved.

  5. would have been nice if they said up front what OS this works with

    does NOT work with 64 bit – why the heck not? too many people livin’ in old days i guess.

    so yeah, does NOT work with Vista 64 (best OS out there for powerful comps)

  6. Very helpful for me. Before I saw your article, I was changing the file name manually from png to ico. Now that plug in does the job.

  7. Using your favorite graphics program (such as Adobe Photoshop or Macromedia Fireworks), create a new canvas. It is recommended that you use a canvas size with a multiple of 16, such as 64 x 64 pixels.

Leave a Reply to Canro International Cancel reply

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