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.
Index
Introduction
Creating a Favicon using PSP
FAQ's
Links
Summary
Introduction
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.
Examples...
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
Index
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.
Example....
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.
example...
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.
<link REL="SHORTCUT ICON" HREF="http://www.calrissian.com/favicon.ico">
*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">
example...
If your site is http://www.netaddict.freeserve.co.uk/, then you would use the
following text string...
<link REL="SHORTCUT ICON"
HREF="http://www.freeserve.co.uk/netaddict/favicon.ico">
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="http://www.calrissian.com/images/favicon.ico">
*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.
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>
Homepage...
<link REL="SHORTCUT ICON" HREF="http://www.calrissian.com/favicon1.ico">
Cooking....
<link REL="SHORTCUT ICON" HREF="http://www.calrissian.com/cooking.ico">
Fashion...
<link REL="SHORTCUT ICON" HREF="http://www.calrissian.com/fashion.ico">
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.
FAQ's
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
Favicon.co.uk : 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
Summary
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