An icon is a graphic image that represents an available function on a computers 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 youre using Internet Explorer 5 or above, youve probably noticed that some sites youve 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 isnt, it will be ignored.
Youre 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 youre 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, youll 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 youd like to make transparent.
When youre 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 sites 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
About the Author:
Shelley Lowery is the author of the acclaimed web design course, Web Design Mastery ( ) and eBook Starter - Give Your eBooks the look and feel of a REAL book ( )
Visit to sign up for a complimentary subscription to eTips and receive a copy of Shelleys acclaimed ebook, Killer Internet Marketing Strategies.
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.
If youre doing business on the Internet, learning some basic web design skills is an absolute must. Not only will you have the ability to create your own web pages, but youll also save yourself a great deal of money.
Selecting an HTML Editor
Although there are many HTML editors available on the Internet, the best editor Ive found is Coffee Cup. This powerful editor is great for newbies and experienced webmasters alike. You can download a fully functional shareware version here: http://www.coffeecup.com
Web pages are created with special codes known as HTML (Hypertext Markup Language). These codes, also referred to as tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters.
The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.
Example:
< font >
An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser.
Example:
< font size=2 >
Attributes are only contained in the opening tags to the right of the element and are separated by a space and followed by an equal (=) sign. The value follows theequal sign and is enclosed in quotes.
Basic Document Structure
Below, is a very basic HTML document structure. It contains the opening HTML tag, the TITLE tag enclosed between the opening and closing HEAD tags, the opening and closing BODY tags and the closing HTML tag. All of your text, graphics and any additional HTML codes will be placed between the < BODY > and < /BODY > tags.
< HTML >< HEAD >< TITLE >Your Web Page Title< /TITLE >< /HEAD >< BODY >
< /BODY >< /HTML >
Each HTML tag above contains an opening tag and a closing tag. The opening tag is written with the command enclosed with brackets.
Example:
< HTML >
The closing tag contains a forward slash followed by the command enclosed with brackets.
Example:
< /HTML >
The opening tag is telling the browser to begin the specified action and the closing tag is telling the browser to end the action.
The proper way to write HTML is to place your closing tags in sequence with your opening tags.
Example:
< B >< I >Example of the proper sequence of writing HTML< /I >< /B >
Notice that the closing tags are in sequence with the opening tags.
When you have several opening tags, the closing tags will begin with the last opening tag and end with the first. Are you totally confused now Heres some more examples.
This is an example of a properly written code:< B >< I >Example< /I >< /B >
This is an example of an improperly written code:< B >< I >Example< /B >< /I >
Creating a Basic Document
Begin writing your HTML by creating your documents basic layout -- beginning with < HTML > and ending with < /HTML >:
< HTML >< HEAD >< META NAME=Description CONTENT=Description of yourweb page >< META NAME=KEYWORDS CONTENT=Keywords that bestdescribe your web page separated with a comma. >< TITLE >Your Page Title< /TITLE >< /HEAD >< BODY >This area will contain everything that will be visiblethrough a web browser such as text and graphics.< /BODY >< /HTML >
< HTML >- Begins your HTML document
< HEAD > - Contains information about the page such as, the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout andJavaScript coding for special effects.
< TITLE > - The TITLE of your page. This will be visible in the title bar of your visitors browser.
Note: Make sure you include your most relevant keyword phrase within your title for Search Engine indexing. A keyword phrase is two or more words that bestdescribe your website. For example, if your website focuses on grooming dogs then your best keyword phrase will be dog grooming.
< /TITLE > - Closes the < TITLE > tag.
< /HEAD > - Closes the < HEAD > tag.
< BODY > - This is where you will begin writing yourdocument.
< /BODY > - Closes the < BODY > tag.
< /HTML > - Closes the < HTML > tag.
Basic Text Elements
< B > - Bold Text
< B >Example< /B >
< I > - Italic
< I >Example< /I >
< U > - Underline
< U >Example< /U >
Color Codes
If you would like to specify a certain text or background color, you can do so by using color codes.
RGB color codes are represented as hexadecimal values. The RGB color codes contain three sets of numbers representing the amount of Red, Green and Blue contained in a color. These codes must be used within your HTML to specify yourselected colors.
Now, to put the above statement in English...if youd like to display your text in a certain color, you must include the hexadecimal color code within your font tag. Each color has its own color code.
Here are a few of the basic color codes:
Black - #000000
White - #FFFFFF
Red - #FF0000
Green - #00C000
Blue - #0000FF
Yellow - #FFFF00
Example:
< font color=#FF0000 >Example< /FONT >
You can find a 216 safe color chart here:
http://www.web-source.net/216_color_chart.htm
Creating Links
In order to navigate a web page, you must create links. Links are created with an anchor, an href attribute and a URL (Uniform Resource Locator). URLs provide the browser with the location of the link, the name of the file and the method in which to access the file.
Example:
< A HREF=http://www.domain.com/ >Link< /A >
When you begin writing your HTML code, all of your codes will be placed between your < BODY > and < /BODY > tags, as this is the only part of your web page that will be viewed through a web browser.
You can find an HTML code chart here:
http://www.web-source.net/html_codes_chart.htm
This chart will provide you with all of the basic HTML codes, descriptions and examples to assist you in creating your web page.
Although this article provides you with a very basic overview of HTML, with the help of Coffee Cup and the HTML code chart mentioned above, you can easily begin learning how to create your own web pages.
Copyright Shelley Lowery
About the Author:
Shelley Lowery is the author of the acclaimed web design course, Web Design Mastery ( ) and eBook Starter - Give Your eBooks the look and feel of a REAL book ( )
Visit to sign up for a complimentary subscription to eTips and receive a copy of Shelleys acclaimed ebook, Killer Internet Marketing Strategies.
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.