|
Overview
Many of you have probably been wondering how you can have a custom icon beside the name of your
site when it is bookmarked in Internet Explorer. Well, that is known as a favicon.
Some of you may already have known that, but not how to set one up for your Spaceports site, as
by default Internet Explorer looks in the root directory of a site for the favicon file.
This tutorial will hopefully teach you everything you need to know to create and set up a
favicon for your site at Spaceports.
Before you start
To set up and test a favicon for your site you will need the following:-
- Internet Explorer 5 or above
- Windows 95/98/2000/NT or similar
- A graphics program capable of creating .ico icon files
- A text or HTML editor
- An FTP client
The icon
Using a suitable graphics program, create a 16 by 16 pixel image using a maximum of 16 colours -
from the standard 216 "Web safe" palette.
Take your time over this part as a mediocre icon beside the name of your site in someone's
bookmark list is actually worse than the standard blue "e".
When you are happy with it, save it as a windows .ico icon file, 16 colour format. Do
not save it as "favicon.ico" - this is important!
IE saves favicon files in the same folder by default, so if you name it the same as almost every
other site, the next time your visitor bookmarks a site with a favicon, it will overwrite
yours.
Call it "yoursite.ico" - replacing 'yoursite' with a shortened version of your site's name
without using spaces or strange characters.
The HTML
Start your favorite HTML or text editor, and open the "home" page of your site.
Between the <HEAD> and </HEAD> tags, insert the following
line:-
<LINK REL="SHORTCUT ICON" HREF="/~username/yoursite.ico">
Replace "username" with your username and "yoursite.ico" with whatever you named the file (as
long as it still ends in .ico).
You will need to repeat this for every page of your site if you want the icon to display if
people bookmark your other pages.
You can also use a relative link to the file if you wish. Some examples of relative
versions are:-
<LINK REL="SHORTCUT ICON" HREF="yoursite.ico"><LINK REL="SHORTCUT ICON" HREF="../yoursite.ico"><LINK REL="SHORTCUT ICON" HREF="../../yoursite.ico"><LINK REL="SHORTCUT ICON" HREF="../../../yoursite.ico">
As you can imagine, this means that different code is used for directories that are deeper into
your site, which can make updating a little trickier. The very first example I gave works
from any directory as /~username/ is the root directory for your site.
Uploading
Upload the icon file just inside your public_html folder in Binary mode, and then
upload your updated pages in ASCII mode.
That's all there is to it (it's up to you to make your site worth bookmarking)!
Variations on a theme
One other thing you can do is to create a different favicon for different sections or sites
within your main site.
To achieve this you only have to create more icon files with different names and use adjust the
link reference accordingly.
Whether you store them all in the same directory is up to you - just make sure that you use the
correct information in the HREF statement.
On this site, I have two different favourites icons for the main help
guide and the Tales of Wysardry section.
Try bookmarking them both to see what I mean (hint hint).
|
