iPhoneとiPadにホーム画面に自社サイトのアイコンを設定する・SafariのWebクリップ機能(PCではこのアイコンはファビコンですね) (タスクマザー)

iPhoneの正方形のアイコン、これ自社サイトへのショットカットのアイコンとしても登録できるということで、早速、設定してみた。

このサイトtaskmotehr.jpは、緑のアイコン、ブログtaskmother.comの方はオレンジのアイコン。

画像2列目、中央２つ(アイコンのサイトタイトルを編集しないと、・・・となる、日本語だと5文字、英語で10文字以内で編集したほうがよい）

iPhoneで、safariのブックマーク機能の一つとして「webクリップ」という機能。

webサイトのショートカットをホーム画面に設定できる。

アイコンを設定していない場合は、サイトのスクリーンショット(ブラウザに表示された縮小画像)で登録される。

アップロードするファイルは、2種類選択できるので、比較のために

緑のアイコンは、iPhone、iPadの方で自動加工してくれる「apple-touch-icon.png」としてアップロード。
オレンジのアイコンは、角丸だけの処理をしてくれる「apple-touch-icon-precomposed.png」としてアップロードした。

見た限りでは、自動加工の方がiPhoneっぽいのでこちらを採用。
現在は、iPhoneで登録した場合は、オレンジアイコンの方も、緑アイコンに近い見え方になっているはず。

アップロードしたサイズは、256X256px。
iPhone 4(iOS 4)では確認していないけど、今後はOSのバージョンや解像度にあわせて調整していかないといけないのかな。
まあ、それほど細かい画像や写真でなければ当面は問題ないように思う。

アイコンの設定方法は、Web担当者Forumさんの「iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう」を参考に作成した。

ありがとうiPodさんの「iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方」もとてもわかりやすく参考になる。

PCでいうところのファビコンにあたる画像。
ファビコンとは、
・ブラウザでお気に入り(ブックマーク)として登録したときに、タイトルの前に表示されるアイコン
・ブラウザにアクセスしたとき、タブのことろにサイトのタイトルの前に表示されるアイコン
・デスクトップにショットカットを作成したときにできるアイコン

もちろん、設定されているWebサイトのみに表示されて、設定されていないWebサイトはブラウザのアイコンなど同じアイコンが表示される。
PCのファビコンはちょっと小さすぎて、あまり魅力は感じなかったけれど、iPhoneのアイコンはかわいくて魅力的。

ただし、Safariのブックマーク一覧で表示されるサイト名の前には、PCのブラウザみたいにファビコンが表示されない。これも登録したアイコンがタイトルと一緒に表示されるとうれしいんだけどと思うけど、iPhoneユーザではないので、それがはたして必要かどうか？使ってみないとわからない。

実際、ホーム画面に設定できるアイコンにも制限があるので、アプリだけでもかなり登録してある。
なので、サイトのショートカットアイコンまで、よほどのお気に入りでないと登録してもらえないのではと思ってしまう。
とにかく、はやくiPhone 4(iOS 4)系、購入しなくっちゃ・・・(笑)

画像提供は、息子のiPhone3GS。
すぐにアイコン、削除しているだろうな(泣)

「iPhoneとiPadにホーム画面に自社サイトのアイコンを設定する・SafariのWebクリップ機能(PCではこのアイコンはファビコンですね)」をブックマークに登録