モバイルデバイスのホームアイコンについて

概要

モバイルデバイス用に作成したWebサイトにブックマークとしてホームアイコンを追加すると、自動的にその時表示したサイトのキャプチャ画像が
アイコンとして登録される。

見た目を重視してホームアイコンをデザイン済みのものを登録する方法は
head内に下記のコードを記述する。

<link rel="apple-touch-icon-precomposed" href="画像ファイルのパス">

rel属性に「rel="apple-touch-icon」と登録されれば自動的に光沢がつく。
ただしAndroid 2.1を対象にする場合には、「apple-touch-icon-precomposed」と記述する必要がある。
サイトにBasic認証が設定されているとアイコンは表示されない。

アイコンのサイズ

• iPhone3G: 57x57px
• iPhone4: 114x114px
• iPad: 72x72px（Retinaモデルの場合は 114x114px）

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" href="touch-icon-ipad.png" sizes="72x72">
<link rel="apple-touch-icon" href="touch-icon-iphone4.png" sizes="144x144">

illustratorでホームアイコンを作成する時の注意

先述の通りの3タイプのサイズアイコン(57px,72px,114px)を
1ファイル3アートボード、裁ち落としを天地左右を0にしておく。
ピクセルプレビューをチェックしておいてアンチエイリアスで1px単位で
太くでるのを注意してアートボード毎に書き出し保存。