Resources for Web Development Students @ Robin’s Blog

You may have noticed that a lot of web sites have a small icon next to their URL in the address bar; this icon/image is called a FavIcon. You can create your own FavIcon with a photo/logo or any graphic at FavIcons from Pics. From the opening page, browse to the file you want to convert to a FavIcon.

Once you have located and selected the file, click the Generate FavIcon.ico button. It may take a couple of minutes to generate the FavIcon.ico file.

When the process is complete a Downlodad FavIcon button will appear. Click the Download FavIcon button. The file download will begin and the new FavIcon will be in a zip file. You will need to unzip the zip file in order to use it. Locate the zip file in Windows Explorer or My Computer, in the classroom downloaded files are stored in C:\Downloads. Double click the file name you would like to unzip. A new window will appear and it will display the contents of the zip file.

Click the Extract All Files link. The Extraction Wizard will appear, click Next. By default the Extraction Wizard will extract the file into the same folder that it was downloaded to. You want to extract this file to the root (main folder) of the site you want to use it on. Note: You must use the favicon.ico file name, do not rename the file.

Click Browse and select the root folder of your web site and click OK. Click Next and click Finish.

Open the index.html file in your site and add the following line of code:

somewhere between the opening and closing head tag. Note: if you are writing XHTML code you will want to ad a closing / to the end of the link element.

Upload the favicon.ico file and the index.html file to the root folder of your web host (public_html for your free f2o.org accounts).

Test the page in your web browser to see if the favicon displays. I tried this with a photo on my hermit crab blog and while you can’t tell what the heck the icon has on it, it did work.

If you are interested in learning more about FavIcons and how to create them using an image editor visit favicon.com.