Favicons and why you need them

Lets talk about favicons. “Favicon” comes from “fav icon” which means “favorite icon”. But what is it and where is it used?

Lets get started on favicons

In this example the Google favicon is shown:

For this favicon Firefox is used as my browser of choice. Obviously you may choose any other browser with few differences if it comes to favicons. As you can see favicons are displayed in tabs, additionally they appear left to the location bar where you can use them to create new windows or drag and drop for bookmarks and if you change the properties of your bookmark you can even use the favicon itself as your bookmark.

Favicon file format

.ico, .png and .gif are suported formats by a wide range of browsers. However, Internet Explorer only supports the .ico file format. Since Internet Explorer is still widely spread, you’re well advised to make .ico your favicon format of choice.

Favicon size

The possible favicon size ranges from 16×16, over 32×32 to 48×48 pixels. But since the actual favicon displayed in your browser will be 16×16 pixels choosing this size will guarantee optimum results.

Also a favicon is usually restricted to 8-bit, 24-bit, or 32-bit in color depth. Of course there are ways to circumvent this restraint. But due to cross browser compatibility you can guess what my advise will be :)

Favicon Html

If you want to add favicon to your site, the favicon Html has to be included somewhere in the header of your html file:

<html>
<head>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<!-- Your content here -->
</body>
</html>

You can either use a relative path, like in the example above or you can use an absolute address like this:

<link rel="shortcut icon" href="http://www.example.com/favicon.ico"/>

It doesn’t really matter where your file is located. Although it might be a good idea to keep it in your root folder where it can easily be found if you ever want to change it. Additionaly this will make sure your favicon is displayed in your subscribers’ feedreader since the root folder is the default location for the favicon.

Animated favicon

You might think about getting an animated favicon gif. Animated always means that there is a good chance your visitors might feel offended. Not because of the actual image, but flashing or moving gifs always create the feeling of being screamed at. It’s like the annoying guy on a party who can’t stop talking although everybody is already trying to ingnore him.

Secondly, and even more important, not all browsers support animated favicons. Especially Internet Explorer which, as already mentioned above, still refuses to accept any other favicon format than .ico[1].

Favicons

To create a favicon just create a 16x16px image with .ico as file format. Store it to your root folder and include it by using the code given above.

Sources

[1] Wikipedia – favicon

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>