Archive for Favicon information

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.

Comments (1)

Where Do Favicons Show Up?

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

Favicon home

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

Favicon Internet Explorer

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

Favicon bookmarks

Tabs when you’re “tabbed browsing”

Favicon in tabs

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

Favicon in Netvibes

Favicons in 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.

Comments (3)