date. 2012/12/13

category. Android iPhone

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風のアイコンを作成したい場合はこちらのサイトで簡単に作成することが出来ます。

参考サイト

関連記事