Tag: apple

HOWTO: iPhone Webclip Icons

Post author By Dan Dickinson
Post date January 15, 2008
39 Comments on HOWTO: iPhone Webclip Icons

I remember, years ago, I was baffled by the little 16×16 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 57×57 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:

<head>
<title>iHelloWorld</title>
<link rel="apple-touch-icon" href="/whatever.jpg"/>
</head>

I’ve tested this with a slightly larger (75×75) 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:

>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 57×57, 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 57×57 does not solve this, it merely scales it up to fit the 57×57.

Addendum @ 10PM: Neil Epstein, Technology Director for Gothamist LLC, says 47×47 seems to be the usable area, and that he had best luck with 45×45.

Addendum @ 1/16 7AM: Playground Blues notes that because of the resolution of the iPhone screen, using an oversized image (such as his 158×158 image) may result in a crisper icon. [via HicksDesign]

Tags apple, ios, iphone, web

Debated

Frigtards

I’d like to revisit a post from last year, entitled “Three Little Words“, where I tried desperately to shake people from the cocaine-style addiction the Apple faithful have to rumor sites.

The trajectory of rumor sites is simple: first, they get a handful of successful predictions while they have a source. They get linked, often by the blogs I referenced above, for somehow nailing their predictions. Their traffic spikes, ad revenues go through the roof. Apple Legal C&D’s them (or sometimes sues), and the legal fight becomes the news for a while.

While the fight is going on, the accuracy of the site starts dropping. Rumored products never appear. Keynote predictions go under 50% accuracy. Wrong information is attributed to “last minute decisions” or sometimes just edited down the memory hole.

Eventually, the traffic drifts to another site, because they’ve started the same trajectory.

Think Secret is on the downward part of this trajectory.

I would give admonitions at this point, warning people away from there, but really, I would rather people stopped putting their faith in any rumor sites.

Think Secret’s trajectory has finished fifteen months after I wrote this, and not with a poor Ryan Meader-esqe whimper, but with a settlement.

Apple and Think Secret have settled their lawsuit, reaching an agreement that results in a positive solution for both sides. As part of the confidential settlement, no sources were revealed and Think Secret will no longer be published. Nick Ciarelli, Think Secret’s publisher, said “I’m pleased to have reached this amicable settlement, and will now be able to move forward with my college studies and broader journalistic pursuits.”

Now, given that Apple fans seemingly know everything, you would think they’d know that a “settlement” is an agreement that both sides reach. As in, Ciarelli has agreed to shut the site down. As in, Apple did not “win” any legal action to force it closed. They proposed a settlement, and Nick took it.

TUAW, how you doin’?

> And how stupid is Apple by forcing this through, killing their most ardent fans? This company is more and more acting like Microsoft. A new Evil Empire. Call them the Evil Twins from now on…! The suits and lawyers has taken over.

TechCrunch, how about you guys?

> This is really disgusting that a company who claims to be the morally right choice(I think there was some advert they released ages ago about being different) Is actually far more evil than microsoft chooses to be. Seeing the way that they are behaving regarding shutting down this site and the way they act to restrict competition on the iphone and itunes, makes me glad that they are not the dominant player in the market. Microsoft may be bad, but they are definitely less evil than Apple.

Slashdot, what’s up?

> So now corporations will determine what independent press is able to say or shut them down? Our news is already skewed enough as it is by the various corporate news outlets who cater to this and that political party.

Macworld, let me hear you!

> How cool is it to bash a college kid? His site has to come down because Steve Jobs is mad? How is it that corporate secrecy is more important than this kid’s first amendment rights? I hope this gets a lot of press.

*sigh*.

For a more analytic, less finger-pointing overview, try The Shape Of Day’s ‘Think Secret Is Dead’.