Adding A Favicon to your iWeb Site

Have you ever wanted to have a little icon next to the URL of your website? You’ve searched iWeb for ages but found nothing dealing with these URL icons. Well – this tutorial will show you how to add a favicon to your iWeb Site.

This tutorial is binary – meaning it will work with iWeb 1.X and the iWeb 2.X (iLife ‘08)

Looking for cool iWeb Templates? Go here!

  1. The first thing you will need to do is to create your icon. You can use any graphical program that allows you to design stuff. Examples include OmniGraffle, LineForm, ZeusDraw and all Adobe Design Applications. You will then need to export the final image as .png and to a relative small size. Then publish your iWeb Site as usual. If you publish to a folder, then please do not upload your site just that moment. Do that after the tutorial!
    Now download iTweak. iTweak is a free application built by Guimkie, which will make this tutorial much easier.
  2. Now go to this page and convert your image into an icon. Then save the icon files to your Desktop. Go into the unzipped folder and search for a file that ends with .ico. Rename that file to favicon.ico.
  3. Open iTweak and navigate to the “Interface” tab. Select the option labeled “Add Favicon.”

    4. iWeb Expander - Favicon Window

  4. Navigate to the downloaded files from Chami, and search for the .ico file which you have renamed to favicon.ico in step 2 and drag it into the drag box for the favicon.
  5. Then go one field up to the “Favicon URL.” Type in the location of where you want the favicon to end up. If you have correctly named the favicon to favicon.ico and you are using the original site structure. So if you publish to .Mac (MobileMe), you can type something like this:

    http://web.mac.com/bob/Bobs_Homepage/favicon.ico

    http://web.me.com/bob/Bobs_Homepage/favicon.ico

    Or like this if you publish to a folder:

    http://bob.com/Bobs_Homepage/favicon.ico

    Alternatively, if you just upload the contents of the folder that iWeb publishes to your server, then your URL will look like this:

    http://bob.com/favicon.ico

    Of course, replace the bob with your .Mac (MobileMe) username or your actual domain, and Bobs_Homepage with your actual site name. Watchout for _’s and spaces, as well as capital and small-based letters!
    That is the most difficult and important part, so be sure that the URL is 100 percent correct!

  6. Now click the “Choose Published Site” and select your Site. If you publish to a folder, you should know where the site folder is! On the other hand, if you publish to .Mac (MobileMe), you might not know. Well it is on the iDisk. So navigate to the iDisk, then into the “Web” folder, then in the “Sites” folder and finally select the folder that is named after your site!
  7. Now click the “Process Site” button and you’re done! Your favicon has now been added to your site.
    Please note that you have to do this processs everytime you publish!
    If you have published to a folder, then you can now upload your site!

Additional Info:

Looking for cool iWeb Templates? Go here!

If you enjoy my site or find my Article useful and wish to make a small Donation – feel free to do so by clicking here. Thank You!