How to Create an iPhone Icon for Your Website

Tue Jan 22, 2008 10:02PM EST

See Comments (1)

If you've already downloaded the latest iPhone 1.1.3 software update, then you know you can bookmark your favorite sites on your iPhone/iPod Touch's home screen.  Unfortunately, since this is a still a new feature, most site owners are not sure how to create those glossy web clips that appear when you bookmark a site on the iPhone's homepage. Lucky for you, I came across Apple's iPhone Dev Center where they've posted step-by-step instructions on how to do this. Those familiar with favicons should have no problem creating an iPhone web clip, since the process is very similar.

If you're a site owner, I recommend you take a few minutes to create a web clip for your site. It's extremely easy to do, and your visitors will love your for it. Here's how to get started:

  • Open your image editing program, such as Photoshop, and create an image that's 57 x 57 pixels. Safari will crop larger images, so you can create one slightly larger if you want.  
  • Save the icon in your computer as an 8-bit PNG file, and name it "apple-touch-icon.png."
  • Upload the image to your site's root directory, just like you would save a favicon image.
  • Now open up your site on your iPhone/iPod Touch, tap the plus sign at the bottom of the screen, and select 'Add to Home Screen.' Rename site if necessary. 
  • Hit the home button, and admire your new shiny icon.
You can also reorganize and delete icons on your home screen by:
  • Clicking and holding one of the icons until they start to wiggle
  • To move icons, hold and drag them to the desired position
  • To delete an icon, simply tap the "X" next to each icon
  • Click the home button when you're satisfied 

Now wasn't that simple? Let me know if you have any questions in the comments below. 

Comments on How to Create an iPhone Icon for Your Website

Post a Comment

Join in the discussion. Here you'll see the comments in the order they were posted.

More Posts: 1

Post a Comment