Create your own iPhone Webclip Icons.
Tutorials February 11, 2008
Now you can spice up your presence with cool icons:
I remember, years ago, I was baffled by the little 16×16 icons that were showing up in my URL toolbar, and it took a surprising amount of searching to find out how to create one. I refuse to let this happen again.
So: 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, the dirt simple way is:
- Create a 57×57 PNG.
- Name it “apple-touch-icon.png”
- Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)
Boom. If you add a webclip for vjarmy.com, you’ll see my smiling mug.
— (Via Dan Dickinson: The Primary Vivid Weblog ยป HOWTO: iPhone Webclip Icons).
UPDATE :
1) make the icon 129 x 129
2) add * link rel=”apple-touch-icon” href=”apple-touch-icon.png” * if needed to make it find it.
3) want more info? go to this site
Regarding 2) - I was having problems with one of those modular php sites where the header was a convoluted bunch of functions pulling from various places and no simple clear index file and the root was not accepted, i.e. no icon showed. So this was my workaround to make it work. If you have TextWrangler, that is great to search a directory for a text string so you can find the files which need this info to render then correctly and finally give your iPhone the icon your website deserves!!!