deco
deco
deco deco
deco
deco

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?)

iPhone iGoogle




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).

Update: Mr Peer pointed me to someone who did the same thing a few hours before me…



The bookmarklet


Here is the bookmarklet I use: Right-clic to copy

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?)




Accueil > Misc.
Custom 'Apple Touch' icons
deco