タッチアイコンの設置方法
スマートフォンでは、Webページをホーム画面に登録して直接ページを開けるようにできます。
本ページでは、タッチアイコンの設置方法を説明します。
タッチアイコンとは
タッチアイコンとは、ホーム画面に表示されるようになるアイコンです。タッチアイコンをタップするだけで、Webページを開くことができるようになります。
以下は、iPhoneでホーム画面にタッチアイコンを表示させる手順です。

AndroidのChromeでは、右上のアイコンから「ホーム画面に追加」を選択すると、同様にアイコンを表示できます。
タッチアイコンを設置していないと、上記のようにページのスクリーンショット(Webページ画面の一部)がアイコンになります。
タッチアイコンを設置していると、設置したアイコンをホーム画面に表示させることができます。
タッチアイコンで使えるファイル形式とサイズ
タッチアイコンで使えるファイル形式は、PNG形式(拡張子png)です。
画像のサイズは、Apple社関連では以下が推奨されています。
機種 | サイズ |
---|---|
iPhone(通常) | 120px × 120px |
iPhone(高解像度) | 180px × 180px |
iPad Pro | 167px × 167px |
iPad,iPad mini | 152px × 152px |
もし、推奨サイズの画像が設置されていない場合は、推奨サイズより大きい画像の中で一番小さいサイズが使われます。推奨サイズより大きな画像がない場合は、最大のサイズが使われます。
あまり小さな画像を拡大すると、綺麗に見えません。このため、1つだけ作るとすれば、一番大きい180px×180pxがお薦めです。
タッチアイコンの設置
タッチアイコンの設置は、画像をapple-touch-icon.pngというファイル名にして、ルートディレクトリ(トップページと同じ階層)にアップするだけです。「ホーム画面に追加」で、アップした画像がアイコンとして表示されます。
もし、複数のサイズを作成する場合は、HTMLのhead内で以下のように記述します。
<link rel="apple-touch-icon" href="images/iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="images/ipad.png"> <link rel="apple-touch-icon" sizes="167x167" href="images/ipad-pro.png"> <link rel="apple-touch-icon" sizes="180x180" href="images/iphone-retina.png">
上記にように、HTMLでファイルを指定するのであれば、画像ファイルはルートディレクトリ以外にも配置できます。上記では、imagesフォルダに配置した場合を想定しています。
上からiPhone用、iPad用、iPad Pro用、高解像度のiPhone用です。各画像のサイズは、sizesで指定しています。
ホームページ作成「ファビコンの作り方と設置方法」