Custom WebClip Icons for iPhone 1.1.3


I'm not sure if this is documented yet, but if you've updated to the latest iPhone software and you add a URL to the home screen (called a "WebClip" by Apple), by default it will take a small screen shot of the web page as the icon. However, it also requests a file called 'apple-touch-icon.png' from the root of your site and will use that instead if it finds it. (Requested with a very descriptive user-agent of "CFNetwork/152.4" - they need to do something about that.)

The iPhone icons are 59x59 57x57 which is an odd size, but it seemed to work fine. I created the icon above for Mowser in Inkscape - it looks pretty good, hey? Why don't you add it yourself and try it out?



Update: I just noticed that the iPhone adds the fancy-shmancy reflection for you and crops the image into a rounded corner square, so you don't have to do that. I was wondering how I got it so accurately at first before I looked at it more closely... :-D

Update 2: Ahh, here's the official docs (WebClip stuff at the bottom). The icon is actually 57x57, but any square image will work and be reduced automatically, and you can also add just add a HTML header like you can with a favicon.ico rather than put it the root: <link rel="apple-touch-icon" href="/customIcon.png"/>.

< Previous         Next >