Favorites Icon
With a simple bit of setting up, you can have your page's place in a favorites list marked with a customised icon. Learn how to create, place and initialise your own icon right here.
This page was last updated on 2012-08-21
Favicon explained
This is a great way to get people to remember your site among the pile of places they have in their favorites folder. You get to put a small (16 pixels by 16) graphic beside your sites name in the list. Now would be about the time you should be thinking about your site's brand name, and come up with an image small enough to be an icon, yet recognisable as being linked to your site. It needs to stand out in a sea of these:
Browser Compatibility Note:
This feature was added to the Windows version of » Internet Explorer in version 5. The Mac version does not support them.
» Mozilla and » Firefox also support icons on all platforms, which they download automatically when you view any page that has a linked icon. These browsers’ implementation is actually much better and more reliable than IE’s — the icons can be in png or gif format too. On this page I use the ico format, which works in all supporting browsers. Apple’s » Safari browser also supports favicons.
Icons
First things first; you're going to need a program that lets you save a graphic as a .ico file (hence favicon.ico). None of the mainstream image-editors let you do this. The program I used, and the one I think is most popular, is » Microangelo. It's a 30-day shareware version, but that doesn't matter. It will only take you a few minutes to draw a picture so small.
There is also an excellent resource on the » Favicon site, which lets you draw your icon in an applet on the site and have it emailed to you. Marvellous.
What makes an icon different from any other graphics format you ask? Well, an icon does not have to be a single image. It is an archive or repository, and can hold several different images, all in one file — simpler images for different colour depths or larger images for placement on the desktop.
Making your Icon
You have 2 options when drawing your icon. Either draw it in your normal image editor and then import it into an icon editor and save it as an icon; or you can create it from scratch in the icon editor. 16 pixels squared is a small area, so be sure to use the full space as efficiently as possible. Our favicon looks like this: 
. Would you remember that as being HTML Source's icon? Damn straight.
The icon is also limited to a palette of 16 colours, all of which are web-safe. Take a look at the table on the right, that's what you have to work with. By design it can contain more, but to be safe stick with these.
You can add in bigger icons that will be used if a reader places a link to your site on their desktop, but just make sure that your 16x16 icon is the first in the file. Once you have your icons drawn, make sure you save the file as favicon.ico (lowercase). Nothing else will do.
Placing your Favicon
If you have your own domain name, www.example.com, just put the favicon in the root directory of your site. That means the lowest level, not in any folder, in the same place as your homepage. Internet Explorer looks in that location by default, so no extra code is needed.
If you have your site hosted by another company in one of their subdomains, like www.example.com/mysite, you should put it in your root directory anyway, but oftentimes that isn't enough. You need to add a line to your <head> section on every page that might be bookmarked. It goes a little something like this:
<link rel="shortcut icon" type="image/ico" href="http://www.yourhtmlsource.com/favicon.ico">
That's the code I use to link to my favicon. The entire URL is not necessary, but it is foolproof in case something messes up. Using this code enables you to call the icon something other than favicon, although I really can't see a need to do that.
Using your Favicon
Now, all you gotta do is get people to add your site to their favorites. There's not much I can say to help you with this, but a guaranteed way to entice people into it is to put an 'add to favorites' button on your page. People are much more motivated to do it this way since it requires less work and even less thought.
The code will only create a link in IE4+, but you could always just tell your readers with other browsers to hit Ctrl + D.
Where your icon appears
The favicon is such a simple piece of promotion, you really should have no excuse for not implementing it straight away. Look at all this extra exposure you get from readers who add your site to their favorites:
- In the Favorites folder
- In the Links bar
- In the Address bar
- On the Desktop
- On the Taskbar
- In the Start Menu
Possible Problems
Although a great feature, for some reason favicons don't always work. On some days they will never appear, other days they work fine. Stick to the guidelines above as closely as possible and you should have less problems. Then just cross your fingers and hope someone, somewhere, is smiling down on you. Don't stress about it, I'm sure I saw it work once...
If you change your icon, and people have it bookmarked, their browsers will continue to show your old one. This is only updated if they delete and re-bookmark your site. Something to remember is that if readers clear their cache, your icons can be deleted too. Also, some servers don't allow favicons to work. If this is the case, send a stern email to your webspace provider and get it sorted.
