タッチアイコンの設定方法
スマートフォンでは、画面上の各サイトのアイコンをクリックしてサイトのページを表示させることが一般的です。よってスマートフォンでサイトアクセスに使う”タッチアイコン”を作成しておく必要があります。
準備するアイコンについて
各デバイスに完全準拠するには非常に多くのアイコンが必要になりますが、一番大きいアイコンサイズを推奨している Chrome for android 推奨の192px X 192pxサイズを一つ作成しておけば良いようです。デバイス推奨のサイズがない場合は、推奨サイズより大きなアイコンのなかで最小のものが選択され、推奨サイズより小さなアイコンしかない場合は最大のものが選択されます。
Safariの仕様
Add to Homescreen - Google Chrome
タッチアイコンの設定
表示させたいすべてのページのトップHTMLに以下を記述します。
<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">
<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="touch-icon.png">
タッチアイコンにタイトルを表示させる
タイトルは半角11文字、全角6文字以下で設定します。
<!-- iOS用 -->
<meta name="apple-mobile-web-app-title" content="タイトル">
<!-- Android版 Chrome用 -->
<meta name="application-name" content="タイトル">
