Tutorials: Favicons     HTML     PowerPoint

Favicons

Cross-browser support for Favicons

What are they?

Favicons are the little graphics that appear next to a site's URL in the address bar. You will also likely see them next to your saved favorites links. These days, they probably do not do all that much to make your site stand out against the competition, since nearly everyone has them. However, your site WILL stand out if you DON'T have it... Unfortunately, it probably screams, "I am unprofessional." So, it is probably good practice to have them working on your pages.

Issues

First, compatibility issues continue even with the release of IE8. Microsoft's latest release is intended to be more standards compliant, but Favicons still appear to be one area that still needs a little help. Type in "Favicon not working in IE8" in an Internet search and you'll find a lot of posts from people who have problems getting IE8 to display their favicons. Worse, even if they get the HTML code, links, and a proper .ico file generated, they sometimes still cannot seem to get it to work when they test it in their IE8 browser.

Solutions

One of the first things to check, especially after altering any code, is that IE8's history and cookies are not preventing the changes from showing up in the browser. For this reason, I like to keep one computer that I use almost exclusively for testing. I can clear out history, sessions, and cookies without creating any problems with sites that I prefer can use the stored data. So, immediately click on the "Safety" button and select "Delete Browsing History". When you try to visit the page again, it should automatically check for the favicon using your code.

If you do not already have one, you will need to create the icon. Typically, you will want the image to be 16 pixels wide by 16 pixels high and you can create this in nearly any image manipulation program. Heck, I think even MS Paint will work for you. I used an image for these pages that was 23px x 23px, though, and the .ico generator I used worked just fine. And, of course, that is the next step after you have an image created. Just remember that the image needs to be unique but that details are not going to be very visible to anyone at that size. A good and simple .ico generator can be found at http://tools.dynamicdrive.com/favicon/. Go there, submit your pic, save it as "favicon.ico". In fact, there are some simple directions below that partially work.

Of course, one of the issues here is making sure we have code in place that addresses Firefox, Opera, IE, and even Safari. For this reason, we will be adding two lines of code to get all of these browsers to check and display your favicon. Copy and paste these lines into the HEAD section of your page:

The Code


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

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

We still are not done! Make absolutely sure that you have your favicon file, the .ico one, uploaded to your Web site's server and that the link you use to point to it is correct. You would be better off placing the favicon file in your root directory. Still, if you choose not to, it will probably work as long as your link is correct. For example, if you place it in an Images folder on your site, make sure that you have included /images/ to the favicon.ico URL. If not, the browsers will be looking for the favicon outside of that file in the default root and, obviously, will not find anything to display.

Really, that is all there is to this. Just remember that IE8 may give you some headaches with this unless you can purge your history. But, take heart in knowing that I used these steps to get it working on this site!