If you want to make a custom icon for your website that will show up in the Springboard when a user makes a “webclip”, using their iPhone or iPod Touch, all you need to do is:
1. Create a 57×57 pixel PNG image
2. Name the image “apple-touch-icon.png”
3. Copy it to the root folder of your website
If you want more flexibility i.e. you don’t have access to the root of your site or you want to use a different file name or format, then you can use a link tag in the head of the document, such as:
<head>
<title>iHelloWorld</title>
<link rel=”apple-touch-icon” href=”/whatever.jpg” mce_href=”/whatever.jpg”/>
</head>
If you do use an image that is larger than 57×57 pixels it will be scaled down automatically for you. Also, Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application should your imaging skills be as bad as mine!.
Note: There is some degree of clipping off the sides of the icon that can’t really be controlled. If you scale down a circular logo (in EPS format) to 57×57, there is a noticeable clip on the sides. With that in mind, I recommend adding a pixel or two on the sides if you’re using a circular design. Note that scaling the icon down under 57×57 does not solve this, it merely scales it up to fit the 57×57.
Leave a comment
You must be logged in to post a comment.