How To Add Favicons

UPDATE: The tips and tricks on this are to do with XSite Pro Version 1 only. Click here for news on XSite Pro Version 2.

A favicon is short for favorites icon.

It is the little logo that appears in the address bar when someone visits your site:

The orange "S" logo in the address bar is a favicon.

A favicon will also appear in the favorites menu when people save your site to their favorites:

The favicon also appears in the Favorites menu.

And here's how to make a favicon:

Make a mini-logo for the site using your favorite graphics program. The mini-logo should only be 16 x 16 pixels. SydneyTravelTips.com: .

Use the main color of your website. I usually use the first letter of the site's name ("S" for "SydneyTravelTips.com") or a picture that represents my site (if I can draw that small).

Save your logo as a GIF file.

Next, visit a site called

Using a graphics software package, create a new document which is only 16 x 16 pixels. Use the magnifying glass to avoid straining your eyes.

Next, set the background colour for the document. I would choose the same colour as one of the main colours on your site. When I created the favicon for my site SydneyTravelTips.com, I chose orange as the background color. This is how the document looked at that point: 

Next, take the first letter of your site's name (for SydneyTravelTips.com, this was the letter "S"). Using the same font as was used in your site's logo, add this letter to the document. This is how mine looked:.

Save your document and then export it as a GIF file (.gif).

Next, visit a site called HTML-Kit. This site will turn the image you have created (a GIF file) into a favicon. It's free of charge.

The way to do this is to use HTML-Kit to browse for that file on your hard disk, and then tell the site to turn it into an icon file. It's all pretty straightforward.

Step 2: Upload Your Favicon To XSite Pro

Once you have downloaded your file (which is always named favicon.ico), you need to do two more things. The first is to add it to XSitePro. The way you do this is by going to the "Other" tab, going to the "File Manager", and uploading the favicon.ico file you just received from HTML-Kit.

Step 3: Paste In A Line Of Code

The final step is to paste in a line of code which will tell the user's browser that it should display your lovely favicon. The way to do this is quite simple. Go to the "Other" tab in XSite Pro, and selecting the "Scripts" button. Once inside the scripts area, paste this line of code into the header area:

<link rel="shortcut icon" href="favicon.ico">

View Your Results

You will need to publish your site to see your results (be sure you are happy with the rest of your site before you publish). You may need to close your browser and restart it before you can see your favicon.

Changing Your Favicon

If you decide you want to change your favicon after you have published, be sure to delete all "Temporary Internet Files" from your browser, otherwise the old favicon will continue to be displayed on your computer (although not on the web). The way to delete all temporary internet files from Internet Explorer is by clicking on the "Tools" menu, and then selecting "Internet Options". Other browsers will have a slightly different way to do this, but it will involve choosing "Options", "Internet Options" or "Preferences".

Well done!

Well done! You have now taken steps to ensure your website is much more professional. Congratulations.

This article is derived from a tip I posted on the XSite Pro Forum in 2005.

Click here to learn more about XSite Pro and what it can do for your business.