Leave a comment


Apr 17, 2008 | Tutorial: How to create favicons

Favicons are those small icons you see in your browser right next to the URL in the address bar or whenever you bookmark a page, as shown below. It’s a great way to brand your site and it adds a subtle touch to your users’ online experience. They’re easy to make, but it doesn’t quite work as easily as renaming a .jpg or .gif file as a .ico. Here’s a quick tutorial on how to do it, using Adobe Photoshop. If you have the open-source equivalent, GIMP, you should already have an option in the “Save Image” dialog box.

Screenshot of browser showing favicons

  1. Download the free ICO format plugin for your appropriate OS.
  2. Save the .8bi (Windows) or icoformat, ICOFormat_cs2.plugin (Mac) into the appropriate folder:

    Adobe Photoshop » Plug-Ins » File Formats

  3. Quit and close Photoshop if you have it open already, and relaunch.
  4. Create a new item with dimensions 16 x 16, as shown below. Set the background contents to “Transparent” to avoid having unwanted color spots around your icon.

    5. New Icon creation in Photoshop screenshot

  5. Insert/draw your icon… (zooming in helps)

    6. Zoom in into Favicon work area

  6. … and save as a .ico file, as shown below:

    7. Favicon... save.. as

  7. Upload your favicon.ico into your root directory of your online hosting space.
  8. Refer and link to your favicon.ico so that the browser knows where to find it. It used to be that just placing the file in your root directory would work, but standards compliance makes sure it works with any browser. Place the following anywhere between your <head> </head> tags:
    9. <link rel="shortcut icon" href="favicon.ico" />

    Remember that this is a relative link as opposed to an absolute one, so if your favicon doesn’t show up, be sure to check where you saved it. Depending on your browser and cookie settings changes may not be reflected immediately, so try clearing your cookies and refreshing several times.

Final product... presto!
Yay for the smiley face! Click here to see it in action.

Alternative options: DynamicDrive has a free favicon generator which will convert a jpg or gif file into an ico.

Inspiration…: Smashing Magazine collected 50 of what they deemed to be some remarkable favicons.

… or lack thereof: Check out a bunch of free icon sets I’ve assembled that you can use for favicons without infringement of licenses.

Also written on this day..

This entry was posted on Thursday, April 17th, 2008 at 9:40 pm, EST under the category of Web design. You can leave a response, or trackback from your own site.