Designs By Astro "Icon Tutorial"

Using Icons on your site!

This tutorial is best viewed at 1024x768.
Please read my Terms of Use if you have any questions.

At this time I am not allowing my tutorials to be translated
so please don't ask!

All images are the sole property of Š Designs By Astro
Do not copy, reproduce or send through email
without my prior written permission. A link is always
welcomed and appreciated though!!
All rights reserved.

The image/images you make using this tutorial
is your property to do with as you wish.

If you have any questions or need further help you can Email me

This tute is written to help you understand how to use small little images, icons as they are commonly called,
so that visitors can see them in their browser. NOTE... geocities apparently does not support ico file extensions
so icons will not work on their sites and possible other sites that do not support this extension. I will explain
in this tute a way around sites that do not support ico extension but IE users will not be able to see the icon
but Mozilla, Netscape and possibly other web browsers will be able to.

Most recommend you use an Icon making program but I found a way around it for those that don't have or don't
want to buy or download another program. We will be using Paint Shop Pro to make our icon. You will need to know
a little about how html works to place the code we will be using in your existing html.

1.) Open a 16x16 canvas in PSP. If you wish to make your icon from scratch you can open a larger canvas to work on
but your finished icon has to be 16x16. I found that images/tubes with only a slight drop shadow or no drop shadow
at all works best for this small of an icon. You will need to play around to see what best works for you.

2.) Once you have the image you want and have it sized to fit your 16x16 canvas you can add a background color if
you'd like or just "merge all" to give it a white background.

3.) Once you have the icon merged flat go to "Window" "Duplicate" This will give you two identical versions of your
icon.

4.) Save the first version as favicon.bmp. Save the second icon as myicon.bmp. Note, you can name this icon what-
ever you'd like but so that you will understand what icon I'm referring to let's name it myicon.

5.) Now that you have those two icons saved you can close out PSP. Go to where you saved the bmp files. Right click
on the favicon.bmp chose Rename, remove the bmp extension and replace it with ico. You should have a file named
favicon.ico now. Do the same thing with the other icon, just replace the bmp with ico. Once you have these renamed
as ico you should see a not so good looking version of your icon...something like this...

Don't panic, it doesn't really look like that! *LOL*

6.) Upload these two icons to your site, they need to be in your main site directory.
Example... my main site directory is http://www.byastro.com.

7.) While you're in your site download your index.html if you do not already have a copy of it on your computer. Right
click on the index.html, Put your mouse on "Open With" a list of options should pop out. Look in the list and see if
notepad is an option for you, if it is click on it and the html of your page will open in notepad. If you do not have
notepad as an option, click on "Choose Program" a box of option will open, scroll through the list of programs until you
find Notepad....

8.) In Notepad you should see the html that makes up your page, something like this...

You may or may not have a title to your page but all html will have the <html> and <head> tags. The code
we will be using needs to go between the start and close head tags. If you do have a title tag then place
the code just above it so that you have something that looks like this...

There also may be other meta tags below your <head> if so just place the code above them. Here is the code you
will need...
<link REL="shortcut icon" HREF="http://www.Your site/myicon.ico" TYPE="image/x-icon">

The URL in the code should be the URL of the icon you made called myicon.ico.

9.) Save your changes in Notepad and close it out. Upload the page to your site. Now in order for Internet Explorer
to see your icon a visitor must first add your page to their Favorites list. I know, P~~~~~~~~ on IE for being finicky!

10.) Once they have bookmarked your site in their favorites they should see your icon. Below is what they see on my
site....

I guess you're wondering why you had to make two icons since the code only uses the one! *L* The reason you made the
favicon.ico is for the icon IE uses in your Favorites list. When IE adds a site to Favorites it looks for a favicon.ico in
the main directory of the site, if there isn't one it uses the IE icon but if there is one it uses it. Mozilla/Netscape does
not allow the icon to show in your bookmarks only in the browser URL box.

You can place the code on each page of your site if you wish.

Now let me explain how you can use an icon on sites such as geocites that do not support ico extensions. Again note
that this alternative will not work for visitors that are using Internet Explorer at this time.

You will only need one icon. When saving the icon save it as a gif or as a jpg instead of as a bmp or ico file. Upload the
icon to your site, in the html use the same code as above putting the URL for your gif or jpg image instead of the ico
image. Visitors using Mozilla and some other browsers will be able to see the icon in their browsers URL box.

I hope you have fun making and using your own icons and have found this tute useful in understanding how to make them
show in IE's Favorites list and in the browser URL box for IE, Mozilla and other browers!

Have fun playing.
Until next time, God Bless!
Connie

Designs By Astro Index of Tutorials