creating an favourites icon
This tutorial focuses on creating and adding a favourites
icon to your web pages when a visitor adds your site (or "bookmarks") to their
favourites using Microsoft Internet Explorer versions 5 and above, Mozilla and
Opera. The icon will display next to the link in the user's Favourites and also
to the left of the url in the browser's address bar (see below). If a visitor
bookmarks your page, Internet Explorer will automatically look for a favourites
icon in the root directory of your web site with the default name favicon.ico.
If this is found, it will be displayed instead of the default IE one. You can
also create different icons for different pages, or sections, of your site.
step 1 - creating the image
1.
Using your favourite
graphics software,
create a 16x16 pixel image depicting your icon
o
Most web sites use a smaller version of their logo or similar
2.
The main consideration is to keep your icon simple and clear at such a
small size
3.
It is also often important to use as few colors as possible
o
Most browser interfaces (the top tool bar containing the browser buttons) can
display 256 colors, but it's best to use the Windows 16 colors
4.
Save this image as favicon.bmp
o
It is important to save as .bmp format as some icon editors won't open .gif
format graphics
Step 2 - creating the icon
1.
Open up your
icon editor
and browse for your saved .bmp
o
we uses IconForge from CursorArts (http://www.cursorarts.com/ca_if.html)
2.
When you open your .bmp to create an icon from it, make sure that you
are using no more than 256 colors (Icon Forge gives you the option to choose how
many colors) and preferably the Windows 16 colors
3.
If necessary, edit the image
4.
Save the image
as an icon
o
Make sure it is called favicon.ico and now has the file extension .ico
Step 3 - including the icon in your web pages
1.
Publish the icon
into the root directory of your web site
o
This is where Internet Explorer will automatically look for it when a visitor
bookmarks your site
2.
Help the browser
find your icon
by including in the html, somewhere between the <head> and </head> tags, the
following: <link rel="shortcut icon" href="http://www.your-web-site-name.com/favicon.ico">
o
Preferably nearer the closing </head> tag, because more important information,
such as your
meta tags,
should come earlier
3.
Save
your web page and publish it
o
If you want to create different icons for different pages, simply call them
something other than favicon.ico, but still retaining the .ico suffix
o
Link to them in your pages in the same way as above, just changing the href
location for the different icons
step 4 - testing your icon
1.
Open Internet
Explorer
(version 5 or above) and bookmark your page
2.
Determine if your icon stands out from other bookmarked web sites with
favorites icons
3.
If necessary, re-edit your icon and publish it again
o
However, you will need to remove the bookmark (Favourites > Organize
Favourites,
select your bookmark and click "Delete") and delete your temporary Internet
files and page history (Tools > Internet Options, tab "General" and click
"Delete Files" under "Temporary Internet Files" and click "Clear History" under
"History").
§
This may take a few minutes if you haven't done this recently
4.
Close your
browser
and re-open it , bookmark your page again to check the new version of your icon
5.
Repeat
until you're satisfied your icon is suitably eye-catching
more information
http://www.favicon.com/
w
Website design by the morenmore group
FREE Java
Local Business & Entertainment Links +
Accommodation & Shopping Click Here!
|
