Favicon     Mouseover     Hex codes     Wibiya     Blue links     My Site     Projects     Help Sites      
     A favicon is the small image viewed on some sites and in some browsers to the left of the page title in tabs and to the left of the address in the address bar (see above).  It also shows up in Bookmarks.  If you are looking online or in your image gallery to find an image you would like to use, you can preview how it will look by right-clicking on the image and selecting "view image".  This should bring up a new page showing the image on the page and in both of the two locations mentioned above.  Or at least that is the way it works in Firefox.

     The first step is to create the "favicon.ico" image.  The .ico declares that the image is in icon format.  There are lots of places online that can do this for you, but most people don't know that they can already do this with "Paint".  When you choose the "save as" option, you can choose the format in which you are saving, but only the most common are displayed.  If you simply type ".ico" at the end of your title, it will automatically save in icon format.  For example, if "favicon.png" is loaded and you save as "favicon.ico" you will now have two images; a png image and an icon.

     You do have to make sure that your image is the right size to be displayed correctly.  There are two different sizes for favicons: 16x16 and 32x32.  If yours is 32x32 it will automatically be sized to fit the smaller application so this is the only one you need to worry about.  First crop the picture into a square, save, and then resize to 32x32 pixels and save again.  If you have the newer version of paint you can do it all there.  You can also use microsoft office picture manager or any other image editing software.  Sometimes after using software other than paint, you will have to re-crop in paint to actually end up with the right size image.
  Right-click on this image and select "view image" for a preview of what it will look like as a favicon.


     After you have made favicon.ico, you will need to upload it to your document gallery.  You can have multiple .ico images for use on multiple pages as you will have to add favicons to individual pages anyway.
     In the "Page Editor" tab select "Page Properties".  Then select the "Search Engine Optimization" tab and paste the following code at the end of any keyword metetags:

%22%20%2F%3E %3Clink rel=%22shortcut icon%22 href=%22%2Fdocuments%2Ffavicon.ico

     You can change favicon.ico above to anything you wish as long as the image exists in the document gallery and is 32x32 px.