|
Internet
Marketing Tools - Icon Basics
Part five of ten
By
Shelley Lowery
An
icon is a graphic image that represents an available
function on a computer's graphical user interface. They
look like a standard image file, however, to create
an icon, you must have a special software program capable
of creating and saving an image in ICO format.
The
size of an icon will vary depending on the application
it is associated with. Some will require a 16x16 pixel
image and others may require a 32x32 pixel image. In
addition, the number of required colors may be 16 or
256.
Favicon
If
you're using Internet Explorer 5 or above, you've probably
noticed that some sites you've placed within your "Favorite
Places" have an icon that displays beside the link.
This icon is known as a "Favicon." Displaying a Favicon
with a website can not only make it stand out among
the sites listed, but it can also build brand awareness.
A
Favicon should represent your website and provide viewers
with an instant recognition of your website. This can
be accomplished by using a specific symbol or logo that
defines what your website is all about.
Creating
Your Icon
You
can easily create a custom icon for your website that
will display within your visitors' "Favorite Places."
Your
first step will be to download an icon creation program.
I recommend using a great shareware program called Icon
Easel. You can download it at the following web address:
http://www.easyapps.com/
To
create an icon with Icon Easel, you simply open the
program and select your icon size and color preference
from the dropdown menu to begin. Your icon will automatically
be created in the preferences you specify. Internet
Explorer requires that your icon is 16x16 pixels. If
it isn't, it will be ignored.
You're
now ready to begin the actual design process. The large
window that contains all the squares is your icon canvas.
Each square represents a pixel and can be edited to
suit your needs. Use the tools on the left-hand side
of your screen to edit these pixels and design your
icon.
Using
an Image
If
you have an image that you would like to use as an icon,
you can do so in a couple of different ways. You can
either copy your image and paste it onto your icon canvas,
or you can paste your image from a file.
If
you're not confident in your abilities to design your
own icon, using a pre-designed image will be your best
option.
Creating
a Transparent Background
When
designing your icon, unless your icon covers the entire
canvas, you'll want to make the background transparent.
This will allow the canvas of your icon to be transparent
and enable the background to show through.
Your
first step will be to click on the "Screen" button on
the right-hand side of your screen. This will display
the transparency lines within your left color window.
To add transparency to a pixel, click on the "Flood
Fill" tool (tipping paint can) on the left-hand side
of your screen and fill in the pixels you'd like to
make transparent.
When
you're finish with your icon, simply save your file
as favicon.ico and upload it to your server where you
store your HTML files.
Associating
Your Icon
Each
time your visitor adds your site to their "Favorite
Places," Internet Explorer automatically searches for
your favicon.ico file and displays it next to your site's
link. You can also associate the icon with your web
page by saving the icon with a different file name other
than favicon.ico and adding the following code within
your HTML between the and tags.
<LINK
REL="SHORTCUT ICON" HREF=
"http://www.domain.com/icon.ico">
The
URL should lead to your icon file.
Ebook
Icons
In
addition to creating an icon for your website, many
HTML ebook compilers will enable you to display your
own product icon. This icon will be displayed on your
clients' desktop. When clicked on, it will open your
ebook.
Before
creating an icon to be used with your ebook, make sure
you review your compilation software to make sure that
you can include your own icon and to get their specifications.
Creating
and displaying your own icon is not as difficult as
you may think. If you follow the simple instructions
above, you can create your own icons in a matter of
minutes.
Copyright
© Shelley Lowery 2002.
About
the Author: This article was adapted from the highly acclaimed
ebook series, Web Design Mastery. Web Design expert and
author Shelley Lowery's latest ebook is an in-depth guide
to professional web design that is rapidly becoming known
as the "Bible" for professional web design. http://www.webdesignmastery.com | 
.
.
.
. 
