Pimp Your Website With a Custom iPhone Icon
Tuesday’s Macworld event saw the introduction of a few new features for the iPhone, including the ability to save a web page as a “webclip” which will then be available on your iPhone’s main application screen.
A webclip is simply a direct link to the site in question and, in adding it to the main iPhone menu, you’re essentially just adding a bookmark that’s accessible outside Safari. Not exactly groundbreaking, but a nice feature nevertheless.
By default the iPhone will try to create an icon based on the look of the site you’re clipping. In some cases that will do the trick, however if you’d like to create a nice custom icon for users bookmarking your site as an “application” on their iPhone Dan Dickinson has figured out how to do it.
The iPhone apparently uses a link tag in the page’s header to locate a suitable image and then falls back on its own creation powers if that fails. So the trick is to create an icon and then point to it with a link tag like this:
<head>
<title>iHelloWorld</title>
<link rel="apple-touch-icon" href="/myicon.jpg"/>
</head>
For the finer points, check out Apple’s documentation over at the iPhone Dev Center.
After some experimenting from Nathan Borror and others it would seem that making a 158×158 pixel icon and then letting the iPhone shrink it to the default 57X57 pixel size results in the best resolution. Keep in mind though that some clipping occurs so you really only have a roughly 47×47 pixel working area.
[via Jon Hicks]
See Also:
