One of the new iPhone features is the ability to create a WebClip, which is basically a bookmark you can put on the home screen that saves zoom data. If you create a WebClip of most pages, the icon is just a screenshot of the page. But, you may have noticed that some pages have custom icons when you clip them. If you want to do this for your own site, it’s pretty simple. Just create a 57×57 PNG file, name it apple-touch-icon.png, and put it at the root of your domain. If you want to specify an icon at the page level, check out Apple’s instructions.
If a user has created a WebClip before you added the icon, it looks like they’ll continue to see the screenshot until they delete it and create a new one. Same thing goes for updating an existing icon— a user will continue to see whichever icon was downloaded when the WebClip was created. Keep in mind that I determined this after about 3 minutes of testing, so it may be inaccurate.
This is my current icon:
And here’s what it looks like on an iPhone:
Update: There is some discussion on Apple-related sites about Apple’s recommended resolution. You may want to go with a 60×60 or perhaps even 129×129 PNG. We’ll see if Apple comes back with an official word on this.
Hi Wysz, I really like I your website and it’s helpful information! However, I would like to see more meta posts. What’s going on in that head of yours? What are you thinking? That is all.
Sweet, I can now comment whenever I want! score!
I’m using the “Meta” category for posts about my site, not for every post about me.