Typically, favicons go in the /root of a website meaning any page from the /root forward gets the icon that’s there by default. Thankfully, for HTML pages, you can use the META tag at the top of the page to specify a different favicon or apple-touch-icon if you’re catering to the growing iPhone surfers – they’re the fastest growing group of surfers on the web! Quick FYI dictates that iPhone favorite icons for the Home Screen are 158 × 158 pixels and YES, other sizes work well, but 158 squared works best of all. We tried’em all.
Your Apple iPhone Home Screen extends to NINE screens! Conceivably, you could load 144 buttons on the iPhone (untested) if not 180! So webmasters! Here’s the skinny so each page has a different apple-touch-icon all its own or favicon all its own.
1. Let your /root hold the primary favicon or iPhone icon by naming a PNG graphic file apple-touch-icon.png in the /root. It should be 158×158 pixels for the iPhone although the Apple site suggests 58×58 just because it’s smaller which equals less graphic quality. Screw data conservation at the kilobyte level: 158 by 158 or risk humiliation next to our icons.
2. Get ready to META TAG special instructions for pages that you feel deserve their own unique icons separate from the site’s icon. This is the TAG made generic so you can copy/paste and change file names:
<link rel="apple-touch-icon" href="/images/PAGENAME-icon.png" />
Make the PAGENAME unique since we’re assuming that your ‘images’ folder will contain several unique favicons. Note the LINK REL in this example refers only to the iPhone for the Home Screen. For the typical 16 × 16 favicon that IrfranView makes easly and for free, you would use the following TAG:
<link rel=”shortcut icon” href=”http://www.SITE.com/PAGE/favicon.ico”/>
The Apple iPhone icon doesn’t care what name you use provided you point to something useful. Explorer favicons are a little more picky and good advice is to make a special folder so that the file is always called favicon as an ico file.
Blogs don’t always accept HTML in the writing or article since everything is called universally through CSS. Some software like the free and easy TextPattern, however, will. When the day comes for strict standards, mixing HTML with your blog will disqualify you from a lot of considerations though. So use different icons for different pages carefully.
3. As an experiment, since PNG graphic files support transparency and the iPhone is full of transparent PNG image files, we put the following little PNG file as the favicon for this page violating strict HTML guidelines just to see if it would work! It’s our logo and depending what browser you’re using, the following will look differently. If you favorite this page and add it to one of the nine possible Home Screens, what a blast! Viva Apple’s iPhone and the fun that’s ensuing!
Use the Comments below to direct us to your icon experiments and pages!
