Add a favicon to your .Mac pages

Ever been to a Web site and wondered “How’d they get that little graphic next to the URL, and how can I do that for my site?” That graphic is called a favicon (short for favorite icon). If you’re willing to wade into some raw HTML code, you can add one to your .Mac pages, too.

Make Your Image

You can create a favicon by exporting a simple picture from your iPhoto library. Crop one to be a square. Then select Share: Export. In the dialog box that appears, select Scale Images No Larger Than and change the Width and Height to 16 x 16. This scales the image down. Click Export and save the file to your desktop. Next, open the file in Preview. Select File: Save As, and then use the Format pop-up menu to change the image’s file type to PNG. Once you have the favicon, upload the image to your iDisk’s Sites folder.

Enter the Code

Now, manually edit the HTML of one of your .Mac pages to add the tags for the favicon. (You’ll have to do this for every page you want the favicon to appear on.) Open a page in a text editor such as BareBones’ free TextWrangler. Add the code in bold to the header section of your .Mac page. Replace the .Mac account name ( chuckdude ) and the favicon file name ( favicon.png ) with your own:

Just remember, if you go back and edit one of your .Mac pages that you’ve added a favicon to, you’ll need to go back and add the tags again. This is because Apple’s HomePage tools reapply the page template whenever you edit a page, thereby overwriting the tags to your favicon.

Subscribe to the Apple @ Work Newsletter

Comments