iPhoneのSafariには独自機能で、
ホーム画面にアイコンを追加できる
「Webクリップ機能」という機能がある。

このWebクリップ機能でアイコンを追加すると、
通常はサイトのキャプチャがそのままアイコン
になっちゃうんだけど、GmailとかBloglinesとかは
ちゃんとしたアイコンが出てきてた。

どうやってんのかな、と思ってたら、
kishin Designさんとこで
ご親切にも作り方を紹介してくれてた。
ありがとうございます。

以下任意のWebクリップ用アイコンの設定方法。

■1. アイコンに使用したい画像を、
　　57px × 57pxのPNGファイルで作成し、
　　ファイル名は「apple-touch-icon.png」とする。
　　※iPhone側で自動的に角丸・立体処理をしてくれるので、
　　　ただの平たい2Dの画像で無問題。

■2. サイトのルートディレクトリにアップロード。

基本は以上。
ちょー簡単。多分3分とかかんない。

ただ、うまくいかない場合もあるらしい。
因みに、僕は上記で試してみたら、うまくいった。

うまくいかない場合
■1. アイコンを使用したいページの＜head＞内で、
　　<link rel="apple-touch-icon" href="images/webclip.png" />　　
　　のように記述。
　　※この場合、画像のパス／ファイル名は任意。

■2. 1で記述した画像パスにファイルをアップロード。

以上。完璧。ぼくはこれも一応設定した。
このサイト、iPhoneでアクセスして、Webクリップして
みてください。

もっと詳しくはkishin Designさんとこを参照のこと。

via kishin Design