HTMLでWebサイトのApple Touchアイコンを設定する方法

iPhoneやiPadでWebページをブックマーク（ホーム画面に追加）した際に表示されるアイコンには、「Apple Touch Icon（apple-touch-icon.png）」ファイルを使用します。あらかじめ設定しておくことで、ユーザーがサイトを保存したときに適切なアイコンが表示され、サイトの見栄えや認知度の向上につながります。

基本的な指定方法

Apple Touchアイコンを指定するには、HTMLのhead要素内にlink要素を次のように記述します。

<link rel = "apple-touch-icon" href = "touch-icon-iphone.png">

デバイス別にサイズを指定する

iPhoneやiPadなど、画面解像度が異なる複数のデバイスに対応させたい場合は、sizes属性を追加して各link要素にサイズを明示します。

<link rel = "apple-touch-icon" sizes = "160x160" href = "touch-icon-ipad.png">
<link rel = "apple-touch-icon" sizes = "170x170" href = "touch-icon-iphone-retina.png">
<link rel = "apple-touch-icon" sizes = "180x180" href = "touch-icon-ipad-retina.png">

このように複数のアイコンを用意してsizes属性で指定しておくと、アクセスしたデバイスに最も適したサイズのアイコンが自動的に選択されて使用されます。特にRetinaディスプレイ搭載の機種では高解像度の画像が求められるため、デバイスごとに最適な画像を用意しておくことで、常に美しい状態でアイコンを表示できます。