Favicon Tutorial

<< go back to Main Article Page

There are a couple of ways to install a favicon image for your website. This quick little tutorial should help you on your way.

Favicon Tutorial

If you've found your way to this page, you probably already know that a favicon is a little pixel image file that is called to the web browser when you view or bookmark certain pages. Favicons can be great for branding your website, so be sure to take your time choosing one.

Here are some simple steps for adding a favicon to your web site:

1. Find or create an image that you would like to use as a favicon. 16x16 pixels is standard size.

2. You now need to convert the image to an image with an .ico extension file. There are numerous programs that will do this, but I happen to use Irfanview. Make a copy of your image. Open up the second, copied image with the conversion utility you chose, and then convert, or save it as an .ico file extension. If you use the second copied version of the image, you still have an original.

3. You can now upload the favicon file to the root directory of your web site. You may need to check with your host to see if they support favicon use.

4. In each of your html pages, within the <head></head> tags, you'll need to add this meta tag:
<link rel="shortcut icon" href="http://www.mywebsite.com/favicon.ico"/>

This code includes the favicon into the browser window when the page loads. You need to replace "mywebsite.com" with your own web address.

Some versions of Internet Explorer, namely versions 5 and higher have difficulty with a favicon. Here are a couple of tips in working with IE:

1. Repeat the exact same steps as above, but relocate the favicon.ico image to your "image" directory, giving the browser the exact location:
(example: www.yoursite.com/images/favicon.ico)

2. Make the same change to your Index.html page, double checking that the complete path is correct. (/images/)

3. Upload the corrected html page, and also the favicon to the /images/ directory.

4. Clear out your IE cache: a. Open IE
b. Go to Tools, then Internet Options and delete your temporary internet files with "offline" checked, and also delete your history.

5. Close, then reopen Internet Explorer. Type in your web site where you added your favicon. Click reload or refresh to view your favicon.

I hope this tutorial regarding favicons has helped you. Try our collection of favicons on your website!

-----------------------------------------------------------
© 2002 and beyond by - L. Schoen
This article may not be published or reproduced in any way without written permission.
If you wish to link to this article, you are welcome to do so.
For more information and articles about Paint Shop Pro and graphic design,
visit Heaven Country Graphics or contact the author.
------------------------------------------------------------

<< go back to Main Article Page