|
The "Favicon" Trick
A "favicon" (short for "favourites
icon") is a tiny image which is displayed in various
parts of a web browser. It replaces the default image
which a browser displays in the address bar, in the
favourites list, on the link bar and so on. In the
case of Internet Explorer, it might look a little bit
like this: 
The use of a "favicon" means
that you can change this image to anything you want
- and this means that your site should stand out from
the others in different parts of the browser:
You should know, however, that
this can be a bit hit-and-miss and sometimes, even
though you have set everything up correctly (more of
which in a minute) the favicon may not be displayed.
I'm going to take you through the
process of creating and installing a favicon. For this
demo, I created a simple favicon for this web page,
and you should see this in the address
bar of your browser, like this (Internet Explorer):
If you're using Firefox,
the result should be similar:
So, apart from the
address box, where else will your favicon show up?
1) On your
browser tabs (if you're using Firefox or
Internet Explorer 7):
2) In your
Favourites ("Bookmarks"):
3) On your
Links bar:
.. although Firefox
doesn't show the favicon in these last two locations
- just in the address box and on the tabs.
So you see, there
are a lot of places on a browser where your "branding",
through the use of the favicon, can make your website
stand out from the rest.
So, how can you achieve
this..?
A favicon is an image file of the
type ".ico", and it always has the
file name "favicon.ico". It is a special
type of graphic and not many graphics programs can
create .ico files. "The Gimp" is an exception,
and you can download this free (but rather quirky)
graphics package from:
http://www.gimp.org
Personally, I find it easier to
use one of the online favicon creator services. The
best one that I've found is at the "HTML Kit" website:
http://www.html-kit.com/favicon/
Before you go there, use your favourite
graphics package to create an image. It doesn't matter
what size it is, as long as it's square. For the purpose
of this demo, I used this image:
You can use most graphics formats.
I used a JPEG (.jpg).
On the HTML Kit site, simply upload
the image by using the site's "browse" button
to locate the image on your hard drive. Then click
on the "Generate Favicon" button - and follow
the rest of the instructions on the site.
When you've downloaded the zip
file containing your favicon, you can then install
it.
In theory, all you need to do is
place the "favicon.ico"
file in the root folder of your website and then every
page on your site should come up with your favicon
displaying.
In practice, however, I've found
that this is not reliable. Here's what I suggest you
do:
- Place the favicon.ico file in every folder
on your site which has web pages in it.
- Between the <HEAD> and </HEAD> tags
of every page on your site,
put this bit of code:
<link
rel="shortcut icon" href="favicon.ico" >
That seems to work quite well!
But remember, it is not guaranteed that your favicon
will display on every browser. And sometimes, it seems
to work on a specific browser on one computer and not
on the same browser on a different computer. There
are a lot of different factors at play here.
OK, over to you.. why not try it
out for yourself?
|
Put
some of my "tricks" to work on your website.
The Webmasters CheatKit range of
products helps you to build professional websites
without needing a load of techie skills!