The What, How and Where of Favicons

While working on my current blog theme I got so caught up with doing all the larger design aspects that I forgot about adding a favicon to my new theme. So often this little site element gets forgotten when it shouldn’t. It’s presence is important to help brand a site and make it recognizable when viewing lists of sites in bookmarks.

So in honor of our little friend that is oft neglected, here’s a good resource for all things favicons.

The Whats of Favicons

What is a Favicon

A favicon is a small icon used to represent a site. Ideally, a favicon should be similar to the site’s theme or logo in order to be quickly recognized and associated with the site.

When visiting a website with a favicon, most browsers will display the icon next to the address bar. Browsers with tabs will also display the favicion next to the site’s name in its tab. Favicons are often displayed in lists of websites such as in bookmarks or feeds.

What does favicon stand for?

Favicon stands for Favorite Icon.

What are a favicon’s dimensions?

Most favicons are displayed at 16×16 pixels, with a few cases where sizes up to 48×48 are displayed.

What format should a favicon be in?

The safest format for a favicon is still the .ico format. Most modern web browsers will accept GIF, PNG and JPEG formats, but Internet Exploder Explorer only reads the .ico format.

The Hows of Favicons

How to create a favicon from an image?

Since a favicon is a perfectly squared image, images being converted should also be square. If it isn’t the favicon could look skewed from the original.

There are a few more robust desktop icon convertor such as GConvert 5, but it is overkill for converting a simple favicon.

There are several web-based favicon generators that can get the job done quickly. I used the one from Dynamic Drive, but there are others such as favicongenerator that seem to do just as well. Here’s a post featuring 20 different online favicon generators.

Upload the image to the site and download the converted .ico file to use.

How to create a favicon without having an image?

Creating a custom favicon that isn’t derived from a pre-existing image is made easy from a few nice web-based tools. The nicest one I’ve seen is favicon.cc. It has a 16×16 grid that can be painted on. It gives a live preview of what the favicon would look like in an address bar. The custom favicon being painted can be downloaded and saved as a favicon.ico when the favicon is complete.

There is also a similar favicon creator at favicon-generator.org.

How to put a favicon on a website?

Now that the favicon.ico image is ready it’s time to get it on the website.

In the <head> of the HTML, put the following

<link rel="shortcut icon" href=”favicon.ico" type="image/x-icon">

There are a few variants to this, but this should be the safest.

Be sure that the favicon.ico is in the correct path listed in the href attribute. In the example given above the favicon.ico file is in the same folder that the HTML file is in, which is typically the root folder. If the favicon was in the images folder, then the href should be href=“images/favicon.ico”.

The most compatible method is to put the favicon.ico in the root folder of the website, since most browsers will be looking there for it.

The Wheres of Favicons

Where to find more information about favicons?

A natural first would be the Favicons Wikipedia article. It details some more information about the format debates surrounding favicons as well as showing more ways to link to favicons in HTML.

Answers.com Favicon topic has a very lengthy article about them and even a video detailing how to make a favicon.

Really those two articles are about all one should need to know about a 16×16 image.

Where to find galleries of favicons?

There are a few sites dedicated to showcasing favicons from all over the web.

Here are just a few:

Where to find Best Of Favicon Collections?

There were a few notable posts from blogs that featured some of the nicer favicons.

Smashing Magazine did a 5 part series on them:

I also enjoyed this favicon collection from DeltaTangoBravo.

I hope this post could help you with some favicon issues you might be having. Do your best to not take the little guy for granted. Being able to pull off an effective branding message in just a small 16×16 square is quite a feat, but it’s worth taking the extra time to get it right.