Custom Webclip Icons for Your Website

iPhone gere iconsNeal, 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.

Advertisements

One thought on “Custom Webclip Icons for Your Website

  1. I LOVE how the iPhone automatically shapes and ‘glosees’ the icon. Looks very sleek. Plus if a site hasn’t yet defined its own webclip icon you can save one anyway…if you’ve zoomed in on a particular image or feature on a page that will become the icon. So I made custom logo icons of my favourite sites who haven’t made their icons yet. Very cool!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s