16th January 2008, 11:16
|
#1 (permalink)
|
| Senior Member
Join Date: Sep 2007 Location: Dubai, UAE
Posts: 445
| EmiratesMac.com Web Clip iCon for iPhone and iPod Touch
Dan Dickinson has posted a small tutorial so that custom webclip icons made specifically for the iPhone and iPod Touch. Quote:
HOWTO: iPhone Webclip Icons
I remember, years ago, I was baffled by the little 16x16 icons that were showing up in my URL toolbar, and it took a surprising amount of searching to find out how to create one. I refuse to let this happen again.
So: if you want to make a custom icon for your website that will show up in the Springboard when a user makes a "webclip", using their iPhone or iPod Touch, the dirt simple way is:
* Create a 57x57 PNG.
* Name it "apple-touch-icon.png"
* Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)
Boom. If you add a webclip for vjarmy.com, you'll see my smiling mug.
If you want more flexibility - perhaps you don't have access to the site root, perhaps you want to use a different file name or format - you can use a link tag in the head of the document, such as:
Code: <head>
<title>iHelloWorld</title>
<link rel="apple-touch-icon" href="/whatever.jpg"/>
</head> I've tested this with a slightly larger (75x75) JPEG, and it works without trouble - it just scales things down.
If you're testing this on your iPhone, you may notice a pause of a few seconds before the icon appears when you press "Add To Home Menu". I'd imagine the icon only downloads when you request to make a webclip, instead of the "request it every time" method used for fetching favicon.ico. (As for why it's a few seconds - well, that's EDGE for you. The lag goes away when you use WiFi.)
Apple has more info on their iPhone Dev Center; look at "Create a WebClip Bookmark Icon".
And don't worry if your icon design skills aren't up to snuff, but do worry if you care about the sanctity of your image:
Quote: |
Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.
| Addendum @ 9PM: I should note another oddity: there's some degree of clipping off the sides of the icon that can't really be controlled. I found this by scaling down a circular logo (in EPS format) to 57x57, and there was a noticeable clip on the sides. With that in mind, I recommend adding a pixel or two on the sides if you're using a circular design. Note that scaling the icon down under 57x57 does not solve this, it merely scales it up to fit the 57x57.
Addendum @ 10PM: Neil Epstein, Technology Director for Gothamist LLC, says 47x47 seems to be the usable area, and that he had best luck with 45x45.
|
|
|  |
Linear Mode
