Making a Favicon

In my GraphX group, a friend asked about those cute little icons that show up in the URL address windows and when you save a URL into your Favorites. I had made one before, so I figured it would be a neat little tutorial to write, so here I am.

I am going to do this in TWO parts 1) The Set-up and 2) Making the Favicon.

First off, "What is a favicon?" you say? Well here is what they look like, just in case you do not know...

This is what it looks like in the Address Bar of your Browser....

This is what it looks like in the drop down window of your Favorites....



1) The Set-up

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>

What you need

I will give you a couple ideas on what you will need to make the favicons. Which ever way you choose is up to you.

A. If you have Paint Shop Pro

If you have Paint Shop Pro, you will first need to change a couple setting. (Special thanks to SweetPea, from GA, for letting me know this technique.)

  • Go to File/Preferences/File Format Associations. A window will pop up, scroll down to Paint Shop Pro Image (it will be UNchecked) and click on it. (See image below)
  • Click on Extensions
  • A new window will open with a list of extentions, click the ADD button
  • Another window will open, type in ico, click OK to close all windows.
  • Close out PSP and reopen. Repeat these steps to see if .ico shows up in the Paint Shop Pro Image list.
  • The .ico exetention will also show up in the list when you Save As (see image below).
    •

       



    B. If you want your own Icon Edit program

  • If you want your own Icon program, you can download one from IconEdit32.
  • If you want to download an Icon plugin to use with PSP, you can get one HERE.
    •


    Both of these are small and easy to use. But with the IconEdit32 you will have to draw your icon fron scratch.



    Part 2 - Making a Favicon



    Back to Tutorials




    I hope you enjoyed this tutorial.
    2006 All Rights Reserved PJ Keplinger

    If you have any questions, you can email me by clicking on my envelope

    Background graphics
    Designed by ©Sorcha 2006
    Please do not use without permission.