Internet Marketing
Tools - Icon Basics - Part Five
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
<HEAD> and </HEAD> 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
You have permission to publish this article electronically, in print,
in your ebook or on your web site, free of charge, as long as the
author bylines are included.
Part Four
Part Six
More Articles
|
