What is a Favicon?

A favicon is a small image that appears in your browser (and other places) used to identify your website. It’s a small visual cue that is associated with your website. See great favicon examples.

Favicon example

The graphic is most commonly an .ico file (similar to a .bmp) that measures 16 x 16 pixels. Other files, such as .png’s, .gif’s, or .jpg’s can be used and are properly read by many modern browsers, however .ico is the most universal file format. It can also be called something other than favicon.ico as long as you link to it property in your head tag. It should be mentioned that Internet Explorer and other browsers can read and display 32 x 32 pixel formats, but most places where you’d expect to see a favicon will still shrink it (downsample it) to show up as 16 x 16 px.

I would recommend using favicon.ico (name it favicon and use extension .ico) at 16×16 because it’s the most widely accepted and recognized format.

How do you create a favicon?

The easiest way is to create a graphic in a square format using your favorite image editor, save the file as a png, jpg, or gif, and then run it through this tool…

Create a Favicon

…then save the file to your root directory in your webserver. Be sure to add a reference to it in between your head tags (as specified in the instructions on the home page). It’s that simple.

1 Comment

  1. chris Said,

    April 28, 2008 @ 2:56 pm

    Nice overview of favicons (and blog, for that matter). I created a simple tutorial on how to create a favicon using pages (from apple iwork suite) here: http://www.cjupin.com/2008/04/28/how-to-create-a-favicon-using-pages/

RSS feed for comments on this post