Blogging Tips

WebClip Icons

Written by John Leschinski from Leschinski Design

At Mac World WebClips were announced for the iPhone and iPod Touch, allowing users to add a bookmark to the home screen that launch Safari to the bookmarked page. By default the application grabs a screenshot of what’s visible in Safari when you create the Web Clip, and some people have resorted to zooming into a logo of the site to get better view of which WebClip is what. But you can also set your own custom WebClip icon to save users the trouble.

First you’ll need a PNG image with a 1:1 aspect ratio named “apple-touch-icon.png”. The size is not really that important as it is automagicly scaled and cropped to 57×57. About 47×47 of that 57×57 area in your image is actually used, and the rest is Apples “glassy” overlay and border making it appear like a built in icon.

Next and somewhat similar too the 16×16 favicons that appear in the url bar in standard browsers, it’s as simple as putting the file at the root directory of your web site. You also can add a <link> element in the <head> of the document as such <link rel=”apple-touch-icon” href=”apple-touch-icon.png”/> to override and specify a specific file and location.

And you’re done.

So in short, Put a PNG named “apple-touch-icon.png” into the root folder.

Written by John Leschinski from Leschinski Design
Posted on January 19th, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

3 Responses to “WebClip Icons”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Download Free AC97 audio Drivers says:

January 19, 2008 at 4:09 pm

WOw Is it really work well with new ware of Iphone

Trackbacks

Icon do site no iPhone/iPod Touch | cenourinha @ blogging says:

February 17, 2008 at 11:46 am

[...] @ Blogging Tips [...]
iPhone Web-Development. says:

February 20, 2008 at 12:03 am

[...] by John Leschinski from on February 16, 2008 | 0 Comments Now that you have your custom icon set up for iPhone users, here is another helpfull guide from the folks at apple to get you started [...]