create icons, make icons, designing icons, favicon

Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Create Icons / Make Icons / Designing Icons / Favicon

Sunday, March 30, 2025

create icons, make icons, designing icons, favicon

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

create icons, make icons, designing icons, favicon
create icons, make icons, designing icons, favicon

Internet Marketing Tools
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 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

About the Author:

Shelley Lowery is the author of the acclaimed web design course, Web Design Mastery. http://www.webdesignmastery.com And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book. http://www.ebookstarter.com Visit Web-Source.net to sign up for a complimentary subscription to Etips and receive a copy of the acclaimed ebook, "Killer Internet Marketing Strategies." http://www.web-source.net


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
ftp tutorial, file transfer protocol, FTP, file permissions More Articles


eTips Member Login

Enter your email address and password to enter the private membership area:
Email:
Password:

Lost Password?

Email:

Not yet a member?

Click here to see what you're missing! Club members receive access to dozens of free video tutorials, utilities and ebooks.

Our Products


Web Design Mastery
Mastering Web Hosting
eBook Starter

Our Other Sites


ShelleyLowery.com
Web Design Mastery
Learn How to Make a Web Page
Make My Own Website Guide
Email Newsletter Service
Mastering Web Hosting
eBook Starter
Raging Hearts
Online Forex Trading For Beginners
Beginners Real Estate Investing

Partner Sites


Site Build It!
Web Site Templates

Web Site Design


HTML Tips
PC Security
CSS Tutorial
HTML Codes
Web Design Tips
JavaScript Codes
JavaScript Tutorial
Java Applet Tutorial
216 Web Safe Colors
Web Site Development
ASCII Character Codes

Web Site Tools


Domain Search
Format Your Text
Create Meta Tags
Text to HTML Converter
Color Code Converter
CSS Generator
Bookmark Site Generator
Button Generator
Rollover Button Generator
Rollover Text Button Generator
Colored Scrollbar Generator
Table Generator
Article Syndication
Free Classified Ads

Follow Us




Daily News For
Webmasters

Back


| Web Site Development | HTML Codes | HTML Tips | Javascript Snippets |
| Web Resources | 216 Safe Colors | Symbols | Web Development Strategies |
| FeedBack | About | Privacy Policy | Terms and Conditions | Site Map | Affiliate Program |


Web-Source.net http://www.web-source.net
Your Guide to Professional Web Site Design and Development
Hosted with Host4Profit.
Copyright © 1997-2025 Brajusta Publishing, Inc., All Rights Reserved