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 taskbar.
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 like “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.
(This must be placed inside the head tag)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Behaviour of favicons differ between browsers at the best of times (the amount of traffic to this article as a result of Google searches for favicon not working etc. is amazing!). 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 (v5.5 and prior) 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 millimetres 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 🙂
