タッチアイコンの設置方法

タッチアイコンとは

タッチアイコンとは、ホーム画面に表示されるようになるアイコンです。タッチアイコンをタップするだけで、Webページを開くことができるようになります。

以下は、iPhoneでホーム画面にタッチアイコンを表示させる手順です。

AndroidのChromeでは、右上のアイコンから「ホーム画面に追加」を選択すると、同様にアイコンを表示できます。

タッチアイコンを設置していないと、上記のようにページのスクリーンショット(Webページ画面の一部)がアイコンになります。

タッチアイコンを設置していると、設置したアイコンをホーム画面に表示させることができます。

タッチアイコンで使えるファイル形式とサイズ

タッチアイコンで使えるファイル形式は、PNG形式(拡張子png)です。

画像のサイズは、Apple社関連では以下が推奨されています。

もし、推奨サイズの画像が設置されていない場合は、推奨サイズより大きい画像の中で一番小さいサイズが使われます。推奨サイズより大きな画像がない場合は、最大のサイズが使われます。

あまり小さな画像を拡大すると、綺麗に見えません。このため、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で指定しています。