iPhone・iPad・Android用スマホ用サイトを作成し、アイコンを設置する際の方法です。
iPhone・iPadアプリ用のアイコンサイズはこちら
画像の用意
アイコン用の画像を用意します。名前は特に決まりはないのですが、『apple-touch-icon.png・apple-touch-icon-precomposed.png』が一般的なのでこちらがいいでしょう。
| デバイス | サイズ |
|---|---|
| iPhone3G・3GS | 57 x 57 |
| iPhone4〜 | 114 x 114 |
| iPad | 72 x 72 |
| iPad Retina | 144 x 144 |
Androidは機種が多いので、iPhone・iPadに合わせて作成するといいでしょう。
アイコン画像のサイズは大きい場合は適当に処理してくれるので、iPhoneまでの対応なら『114 x 114』以上。iPadまで対応なら『144 x 144』以上にするといいでしょう。
htmlへの記述
iconへの指定の記述をします。
また、iPhone・iPad限定でよければ、ルートディレクトリに画像を設置するだけでlinkの記述をしなくとも認識してくれます。
光沢を自動で付ける場合
<link rel="apple-touch-icon" href="画像のパス" />
光沢を自動で付けない場合
<link rel="apple-touch-icon-precomposed" href="画像のパス" />
また、iPhone風のアイコンを作成したい場合はこちらのサイトで簡単に作成することが出来ます。
