How to Add a Favorite Icon to Your Site

Here are the instructions for creating and adding a Favorite Icon to your web pages/web site.

A Favorite Icon is the cool little thumbnail image that appears in the address window of a browser when someone goes to your page.  And it is stored in someone's bookmarks if they bookmark your page, making it more recognizable and easier to find.  Making one is actually quite simple, but you have to follow these steps exactly:

First, make the icon itself, which is a small image file. The easiest way to do this is in PhotoShop.  Open PhotoShop and make a new file, 16x16 pixels in size, 72 ppi resolution, RGB 8-bit color space. You now have the blank template on which to make your icon. (You can choose your background color here, or add it later.  I often like white backgrounds, since they blend with the address bar. Realize that transparency will not work, at least in this method.)

In this tiny little image file, you want to create the mini-icon that you will use. Obviously, with something this small, simpler is better.  Look at other web sites that have these to get an idea.  Here are links to some of my own pages that have favicons: this web site, my portfolio, my father's site, Big Bend Contemporary, League of Graduate Artists.

Okay, so now you have made your file.  Save it as a PSD file if you might want to work on it later, and then "Save As" and make a bitmap (BMP) file from it (Windows format, 16-bit depth).  Give this file the name "favicon.bmp" and put it in your site folder. This could be in your "images" folder, but I have also read some places that this file works best if in your main folder.

Now, in Finder locate the file and double click on the name.  You are going to change the ".bmp" extension to ".ico".  There are probably better ways to do this, but this works. Confirm that you really want to change the file type.

On to adding this to your site.  Definitely add this to your home page, although you may want to add this script to all of your pages. Open your index.html file and switch to "code" view. You are going to add the following information to the "head" section of your page, after your META data and probably before your styles, linked style sheet, or other javascripts (behaviors) if you have any. At least make sure it comes before the </head> tag.

Here is the code you add:

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

<script language="javascript" type="text/javascript">
<!--
da_image = new Image();
da_image.src = "favicon.ico";
// -->

</script>

This text gets copied and pasted exactly as I have shown it above, except...

If you put the favicon.ico file into a folder other than the home folder, than you need to list that folder in both the top line (e.g. - href="images/favicon.ico") and the fifth line (e.g. - da_image.src = "images/favicon.ico").  Note that both of these must be exactly the same. The reason this information is duplicated is that different browsers read different lines in this script. So this will hopefully have your icon work in all or most browsers.

That's it! Save your modified index file, and copy this script (with the correct image address) to any pages you want this icon to appear on. Then upload these modified pages and be sure to upload the favicon.ico file itself. Try it, it should now appear in the address bar. If not, first try clearing the history and cache followed by reloading the page. If it still isn't working, reread everything above to make sure you did everything correctly. The wrong file type or errors in the above script will cause this not to work. And it must be named "favicon.ico" for this method to work.

Good luck, and I look forward to seeing some favicons on your sites....

 

Return to Resources page.