Part Five Icon Basics
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
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:
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
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
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.
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
About the Author:
Shelley Lowery is the author of the acclaimed web design course, Web Design
And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book.
Visit Web-Source.net to sign up for a complimentary subscription to Etips
and receive a copy of the acclaimed ebook, "Killer Internet Marketing
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.