読者です 読者をやめる 読者になる 読者になる

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

スマートフォンでは、画面上の各サイトのアイコンをクリックしてサイトのページを表示させることが一般的です。よってスマートフォンでサイトアクセスに使う”タッチアイコン”を作成しておく必要があります。

準備するアイコンについて

各デバイスに完全準拠するには非常に多くのアイコンが必要になりますが、一番大きいアイコンサイズを推奨している Chrome for android 推奨の192px X 192pxサイズを一つ作成しておけば良いようです。バイス推奨のサイズがない場合は、推奨サイズより大きなアイコンのなかで最小のものが選択され、推奨サイズより小さなアイコンしかない場合は最大のものが選択されます。

 Safariの仕様

Configuring Web Applications

Chrome for Androidの仕様

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="タイトル">
<!-- AndroidChrome用 -->
<meta name="application-name" content="タイトル">