If you go to m.yahoo.com and bookmark it onto your iPhone, what do you see? That’s right! A nice, wonderfully purple Y! bang icon.

That’s because iPhone’s Safari browser allows mobile site developers to specify an icon to be put on an iPhone’s home screen when a user bookmarks the site. If this icon is not specified, however, the iPhone creates a mini-screenshot of the browser’s current page and uses that for a bookmark icon.

You can do the same with your Blueprint site. Since Yahoo!’s mobile homepage is built using the same technology as our site, you can surely implement your own bookmark icon as we do for ours. The trick is not yet documented, but we are happy to share it with you upfront:

- Create a 57×57 PNG file that you like to use as your icon. Example: slideshare_touch_icon.png - Put this image file in the resource/images folder of your ZIP package - In the config.xml, close to the <icon> tag, add another line: <icon type=”iphone”>…</icon>. Example: <icon type=”iphone”> slideshare_touch_icon.png</icon>. - In the space between the tag, fill in the image file name. - Submit your ZIP package. If you already have a Blueprint site up and running, you need to change the version number in the config.xml file and resubmit it again.

After the submission, click “Publish” and reload your page on the iPhone. When ever now a user adds your site to it’s home screen, your new icon will be used instead of the mini-screenshot.