スマホ（スマートフォン）やタブレットで、頻繁に利用するWEBサイトを
すぐ確認できるようにホーム画面に追加することがあります。

iPhoneの場合「ホーム画面に追加」を選択すればホームにサイトのアイコンを表示し
ブックマークすることができます。

しかし、アイコンの設定をしていないと、サイトのキャプチャ画像で登録されてしまいます。

アイコンを指定する場合、HTMLに下記のコードを追加すればアイコンを表示することが可能です。

下記に、スマホのホーム画面に指定したアイコンを表示した時の方法をメモします。

■ ホーム画面にサイトのアイコンを表示

ホーム画面に使用するアイコンの画像を用意します。

※今回は120px×120pxで作成しました。

作成したアイコンをアップロードし、headタグ内に下記のコードを記述します。
光沢のあり・なしを設定することが可能です。

※URLはアイコンまでのパスを指定します。

【光沢ありの場合】

光沢ありの場合は「apple-touch-icon」を指定します。

<link rel="apple-touch-icon" href="http://raining.bear-life.com/apple-touch-icon.png" />

【光沢なしの場合】

光沢なしの場合は「apple-touch-icon-precomposed」を指定します。

<link rel="apple-touch-icon-precomposed" href="http://raining.bear-life.com/apple-touch-icon.png" />

コードを記述し、サイトにアップロードします。
アップ後、「ホーム画面に追加」をすれば、上記のアイコンのように表示することができます。

上記はiPhoneでのみ確認しています。
また、ベーシック認証をかけているとアイコンを設定することができないので注意です。

Androidの場合は標準のブラウザではなく、Chromeで追加するとホーム画面にアイコンが表示されます。
ただ、バージョンによるかもしれませんので試してみてください。