Creating a Favicon - with Paint Shop Pro

Summary : Creating a Favicon can add a touch of distinctiveness to a website. It is easy to create a favicon using any standard paint program, installation is similarly a simple process.


Creating a Favicon using PSP



Favicon's are those little icons that precede 'some' domain names as displayed in the address bar of any given web browser. The name comes from 'favourite icon' where this tiny picture is the main icon to identify a website. Not all webmasters choose to make the effort to create a 'favicon', but I think the time is well worth the effort.



Not only will the Favicon be displayed in the address bar, but if a website visitor adds the site to their favourites folder, it will be displayed along with the site name. Favicons not only look professional, they help to add an extra touch of distinctiveness to a website. As things are, many webmasters still fail to use favicons- which is odd considering how easy they are to design and install.


Creating a Favicon using PSP

Okay, here is a step by step pictorial guide* to creating your own Favicon.
*For this guide, I will be using Paint Shop Pro'7, although the same principles apply to whatever graphics program you may have.

Necessary software : Any 'paint' program will do, as long as you can save the picture as a bitmap (.bmp) image, everything will work out great. There are 4 main steps to adding a favicon to your website


1. Drawing the Favicon
2  Saving the Favicon
3. Editing your webpage
4. Uploading the Favicon

Notes for Webmasters

1. Drawing the Favicon

Create a blank canvas first....with the following settings

16x16 pixels
Image type should be 16 colours (4 bit colour)

*yes, this is a VERY small picture, but that is because it has to be small enough to fit into the address bar !

For your Favicon, you have a choice of just 16 Colours. Indeed, it is a very limited colour scheme, but it is more than enough to create a reasonably good tiny picture.


From the above drawing, will come this little Icon :     - even though it was a simple design, in an address bar this favicon would look quite effective for a Meteorological website.

2. Saving the Favicon

You need to save your Favicon, as a .ico file

Special note...
In the case of Paint Shop Pro'7, the program does not support .ico files. There is a simple way around this though.

1. Save your picture as a .bmp - you can name it anything you like, so long as the extension is .bmp

2. Rename your file to a .ico file.  - this is a really simple way to get around the limitations of some paint programs.

favicon.bmp    then rename to   favicon.ico

3. Editing your HTML webpage

The following text string should be added before the  </head>  - which is located near the top of your webpage.


*Of course, you should alter the website name to your website, or you'll get my Favicon appearing !

Special note for those using 'Free hosts'

The text string you would use...

<link REL="SHORTCUT ICON" HREF="http://www.yourfreehost.whatever/yourname/favicon.ico">


If your site is, then you would use the following text string...


Of course, it depends on your precise directory structure, but most websites will work as noted above.


4. Uploading the Favicon.ico file

Your 'favicon.ico' should be uploaded to the 'root' directory of your website.

So.....for instance....

For my website, using any FTP program I simply drag and drop the 'favicon.ico' file into the www directory.

If you wish, the favicon.ico file could be uploaded to some place else, such as an image folder.
However, the text line you type in the webpage will need to reflect this.

such as:    <link REL="SHORTCUT ICON" HREF="">

*I recommend - especially if you want to use just one favicon on your website, to place the favicon.ico file in the root directory rather than a subfolder. Web browsers will more likely detect your icon there.


Notes for Webmasters

If you want to be really fancy, you can actually have different favicons for different parts of your website -although I personally think this could make things overly messy for a website.

Say for instance, you have 3 sections, your main 'Homepage', Cooking, and a Fashion section.

The following example text strings could be used, for each given section's webpage, added before the </head> 




The name of the Favicon does not have to be 'favicon'. What is vital is that it is an  .ico file - otherwise the web browser will not recognise it. For example, you could have 2 favicons called 'cooking.ico' and 'fashion.ico'.

However, if this is your first attempt at favicons then just try to get one working on your homepage to begin with - rather than working on a collection of them.


Q. Will the Favicon be shown on all my WebPages, or just my homepage ?

Assuming the visitor to your website enters via the homepage, most web browsers 'should' keep the favicon in the address bar, no matter what webpage the visitor progresses to.

Q. I've done everything you've said, and I still don't see the Favicon in my address bar, why ?

The 'cache' in your own computer may not be showing the latest version of your webpages/images etc. Try hitting the F5 key, it may refresh the page to show the latest version.
*Note that not all web hosts will support .ico files. If your host does not, ask them nicely, if they are not interested in helping, then move to a decent host !

Q. Why does the Favicon for my website does not appear in my 'favourites' folder in my web browser ?

Try deleting your site, revisit your site, and re-add, it should then appear with your icon. If not, it is likely a 'cache' issue, and will be resolved simply by waiting a day or so.
If you are using Mozilla Firefox, you can tell your browser to check for new icons periodically.

Q. I uploaded a new version of my favicon, but why does the old one still appear ?

Again this is a cache issue - which could be either on your own computer, or the local server of your Internet Service Provider (ISP). You should give it a few days to update, although it may take longer !

Links : A free service to create your favicon online - the final pic will be emailed to you.

Creating your own Favicon : A useful little guide, based on people using IE.

HTML guide - adding a favicon:  'Dave's site', short but useful guide


Favicon's are great ! They serve primarily to add a touch of flair to a website. Appearing in the address bar of most web browsers they can help promote a website. In my experience, internet users are more likely to return to a website with a favicon than one without. It should take no more than an hour to create and add the favicon to your website, it is well worth the effort.

Return to Calrissian Home

Page Last updated : 17/07/04