FavIcons Explained

This article was written by Chris Burgess.

What is a favicon? (those tiny icons in your address bar)

A favicon is the name given to the little icon that appears in the address bar of your web browser when you visit most sites. The name favicon comes from the term Favourites Icon.

As well as your web browser’s address bar, favicons are also displayed in the list of bookmarks (in Mozilla) or favourites (in Internet Explorer), when you have a shortcut directly to a URL in Windows or as a shortcut on the Windows taksbar.

The current favicon at mozilla.org

Favicon example

Having a custom favicon is a nice touch that can add to the branding of your site, logo or design/theme. A favicon is a special 16×16 bitmap which you can either create yourself or use one that already exists. More advanced favicons can be larger with more colours, but you’ll need to research favicons further if you’re doing this because if it’s not created correctly, it will be ignored.

You may have noticed 404 errors in your web server error log saying something lke “favico.ico does not exist”, this is Internet Explorer looking for the favicon file in the web root of your site. Simply placing a favicon in your web root (http://www.yoursite.com/favicon.ico) will work most of the time, however best practice is to specify the file and location (either relative or absolute) with the following code below highlighted in bold. This will ensure your favicon will display on most (if not all) browsers.

<head>
    <title>Melbourne PHP Favicon Example</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

Behaviour of favicons differ between browsers at the best of times. What I have found is that in Internet Explorer, you won’t see the favicon until you reload the page. In Mozilla you should (hopefully) see it immediately.
How do I make my own favicon?

There are dozens of tools that you can use to create your own favicon, CNET has a large variety to choose from. You can either use dedicated icon editing software or use an image editor. Likewise you can either convert an exiting image or create a pixel based image from scratch.
I can’t see my favicon! What’s happening?

From personal experience I have found that Internet Explorer doesn’t always display favicons. There is a little trick to get them working (it’s not 100% guaranteed, but it usually works) which is to click on the “e” icon where the favicon should be displayed and drag a couple of millimeters until you see the shortcut arrow, then unclick. If you’re lucky it’ll appear, if it doesn’t, it’s time you start using Mozilla. If you’re having troubles with your favicon, feel free to ask a question at the Melbourne PHP User Group discussion forum, someone there will be glad to help.

Here’s the Melbourne PHP User Group 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>