1 comments
Saturday, January 19, 2008
You can easily give your site a custom icon when it is added to the iPhone's home screen as a WebClip bookmark. According to Apple's iPhone Dev Center just create a 57 x 57 pixel PNG image, name it apple-touch-icon.png, and place it in the root directory of your web site.
If you want to set a specific icon for a web page, add a customized version of the following line to your page's head element:
<link rel="apple-touch-icon" href="/customIcon.png">
What should you do if your favorite site has not yet created an icon? Peter Zich has created a bookmarklet that allows you to enter the URL of your desired icon for any site. First, create a bookmark in Safari on your Mac (or any other bookmark database that syncs with the iPhone), give it an appropriate name ("Set Icon"), and overwrite the URL with the following Javascript, from Peter Zich's site:
javascript:var isThere=-1;var theURL=window.prompt("Enter URL of Webclip image (57x57px png):","http://");var html_head=document.getElementsByTagName('head').item(0);var all_Links=html_head.getElementsByTagName('link');for(var i=0;i<all_Links.length;i++){if(all_Links.item(i).getAttribute('rel')=='apple-touch-icon'){isThere=i;}}if(isThere<0){theLink=document.createElement('link');theLink.setAttribute('rel','apple-touch-icon');theLink.setAttribute('href',theURL);html_head.appendChild(theLink);}else{if(window.confirm("Custom webclip icon was found on site, overwrite?")){all_Links.item(isThere).setAttribute('href',theURL);}}An alternative version of the script, also available on his site, lets you automatically prepend the common part of your image URLs. On his version, it prepends http://pz2.ucls.uchicago.edu/webclipIcons/, where a number of bookmark icons are available to use.