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.

Some years ago favicons were only displayed in the address bar and bookmarks of your browser, but it has been showing up in more places, especially with the advent of start pages.

Here is a sample list of places where you will find favicons displayed next to your URL or page title (assuming your website has a favicon):

Next to your website’s URL in the address bar

This goes for Internet Explorer (IE 6,7), Firefox, Opera, and most other browsers

In your bookmarks (you usually have to visit the site from clicking the bookmark link once for it to show up properly)

Tabs when you’re “tabbed browsing”

Favicons are also automatically used as visual cues in many start pages such as Netvibes and Protopage

This is by no means an exhaustive list, but it should give you an idea how important it is to have a favicon for your website these days. It’s an integral part of branding for your site and a pretty effective visual cue in your browser and numerous other places online.

Arrrr! Have you made a favicon-arrr for your website yet, mayte?

…or something like that.

For a long time now I’ve been using Dynamic Drive’s favicon tool, but I’ve never been able to remember the URL so I would always have to look it up in my del.icio.us bookmarks.

So I decided to create this little website and have named it Faviconr.com because 1. it’s a favicon plus one more letter (easy to remember) 2. it reminds me of Flickr (which is awesome) and 2. because it’s all web 2.0 and uses prototype, scriptaculous, and all that other AJAX jazz.

Hope you like it. If you do, bookmark it, share it, flip it, print it. Techno-logic!