Design Custom Webclip Icons for iPhone and iPod Touch

Recently, Dan Dickinson outlined a straightforward method for web developers aiming to optimize their sites for iPhone and iPod Touch users by adding a custom webclip icon.

The process is remarkably straightforward:

  • First, create a PNG file measuring 57×57 pixels.

  • Save this file as “apple-touch-icon.png”.

  • Place this file into the root directory of your website, which is the primary folder where your web files are stored, not the server’s root.

This simple addition ensures that your site’s icon looks appealing with automatic enhancements like gloss and rounded edges applied.

For more insights, see the mention on Daring Fireball.

Share This Article
John Devis

John is a passionate tech enthusiast with a deep love for all things Apple. With a keen eye for detail and a knack for uncovering the latest trends and innovations, John brings a fresh perspective to the world of Apple products.