16 Jan 08 Custom Webclip Icons for Your Website

Neal, of Geek Brief TV, and I were talking last night after the Apple Universe live podcast recording (btw it was the 100th show) about how the icons suck for most webclips on the iPhone. It pretty much takes a snapshot of the current screen and uses that as an icon, yuck. We mentioned something about favicons should work, but then again those are 16X16 and very small.

Well turns out Apple has built in the ability for you to customize the icon that is displayed on anyone’s iPhone that makes a webclip out of your website. Here is the down and dirty instructions:

• Create a 57×57 PNG (it is said that b/c of the iPhones amazing resolution you can use a 158X158 icon that will scale down very well and thus make for a better looking icon)
• 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.)

That’s it…Google and some sites have already done this, and you may of noticed their icons look more professional. There are great tools out there for making small icons of this size, and if you are a Mac, buy the MacHeist bundle for only $49 which includes Pixelmator (and 10 other great apple programs) to make your own custom Webclip icon for the iPhone/iPod touch.

Tags: 1.1.3, 56X56, Apple, favicon, iPhone, iPod, iPod touch, keynote, macheist, macworld, pixelmator, weclip