Now, to get to the fun part.. : ) I will be doing this in PSP so that it will be easier to follow.

Open a new image 16X16 transparent. I know this is going to be small, but we will fix it for working on. Flood fill this layer with WHITE and name it BG (background)

ZOOM in to about 1000% or 3000%

Go to View/Grid to turn on the grid lines. Then go to View/Change Grid Properties and change the bottom set of numbers to 1. This will add grids across your image 16 squares across and 16 squares down.

NOTE: I will be doing this like I made my icon, so that you can get the gest of it, but you will need to do it the way you want your icon to look.

Add a new Raster Layer, I named this STAR, since that is what I will be making.

Since I am making a compass star, I need to make my main center star. Since the original image is 16 pixels, each square you see is ONE pixel. So I used my paintbrush with a size of 1 to color in my first star.

Next I clicked each square that I needed for my cross star.

I clicked on the BG layer and added a NEW Raster Layer. I prefer to make each new step on a NEW layer, as this will be easier if I want to change a certain area (if I made an intricate design). I then flood filled this new layer with a deep blue.

I am content with how it now looks. I then Merge, Merge All and then saved it as a .ico

This is what it looks like when save in my Favorites.....

Now you, too, can make your own tiny URL icons. Just remember to name EACH one with a different name, and add the HTML code to each page associated with your web page. If you have any questions, or need help, please feel free to e-mail me at my address below. Have fun!!

NOTE: First off, some FREE servers do not acknowledge the .ico format. It is best that you try it out to be sure. So far, I found out that Delphi web does not accept the favicon, but Angelfire (a free server) does.

Associate the Icon with Your Web Page

After creating the icon, you must associate it with your Web page. One way is to save the icon with the default file name of favicon.ico in the root directory of your domain, for example, www.microsoft.com/favicon.ico. Each time your Web page is added to a user's favorites, Internet Explorer automatically searches for this file and places the icon next to all the favorites and quick links originating from your site.

You can also associate the icon with your Web page by saving the icon with a file name other than favicon.ico and adding a line of HTML code in the head section of your Web document. The line of code includes a link tag that specifies the location and name of the file. You can include this link tag on a per-page basis. (NOTE: The favicon I used for my Dragon's Keep pages is named dragon.ico and is located in the same folder as my SCA index.html homepage.)

I added a blank space at the beginning of each HTML code so that it would show here....
< HEAD>
< LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">
< TITLE>My Title< /TITLE>
< /HEAD>

Back to Part 1 - Making a Favicon

Back to Tutorials