What is this about?
On the iPhone, we can now add bookmarks to the home screen. Some websites offer a great icon… but for others websites, can we chose a custom icon?
Yes, and I'll explain here how I do it (maybe there's a better way?)
The idea
With a bookmarklet, we can modify the current page and add this tag in the headers:
<link rel="apple-touch-icon" href="http://somewhere/pic.png">
After using the bookmarklet, we can bookmark the page to the home screen, the iPhone will read our tag and store the picture on its memory. The page will no longer contain the "apple-touch-icon" reference when you visit it later, but it doesn't matter, the icon will remain on the home screen.
To use it, we just have to provide a URI to a PNG picture online (such as
this one used for iGoogle on the photo).
The bookmarklet
javascript:
(function(){
var n_h=document.getElementsByTagName('head'), n_url,n_tmp;
n_tmp=document.createElement('link');
n_tmp.setAttribute('rel','apple-touch-icon');
n_url=prompt('Where is the icon?','http://');
n_tmp.setAttribute('href',n_url);
n_h[0].appendChild(n_tmp);
}
)();
This is my first bookmarklet. If you're also new to bookmarklets and want to edit it or create one, I suggest you read
this guide. There's
an useful JS editor on that page.
Quick reminders about bookmarklets and how to use them on the iPhone
Bookmarkwhot?
A bookmarklet is a script (written in javascript) which is contained by a link. It's executed when you click on the link but it's meant to be stored in your bookmarks and can be executed from your bookmark menu.
…on the iPhone?
To save a bookmarklet on the iPhone, you have to put it first on your computer's bookmarks and sync your computer and iPhone's bookmarks. (It works on a Mac… does iTunes for Windows sync the bookmarks?)