スマートフォン(iPhone、Android)のホーム画面には、色々なアプリのアイコンが表示されます。実はアプリだけでなくWebサイトのショートカットもホーム画面に置くことができます。

このとき「サイト制作者が何も設定していないWebサイト」のショートカットを作成した場合はブラウザのアイコン(例:画像の左のアイコン)が表示されます。

今回は自身の制作サイトで好きな画像をアイコン(例:画像の右のアイコン)として設定する方法を紹介します。

この設定をしておけば、サイト閲覧者がサイトのショートカットをホーム画面に作ったときに制作者が用意したアイコンが表示されて「おっ、綺麗なアイコンで表示されたぞ」と言ってもらえること間違いなしです。

設定方法

あらかじめアイコンを作成しておく必要があるので、ペイントや画像編集ソフトでこだわりのアイコンを作成しておきましょう。画像編集やデザインが苦手、という場合は自身で撮影した写真を利用するのも手です。

「アイコンの制作方法なんてわからない、作る時間もない」という人は、googleで「アイコン 無料」などのキーワードで検索すると素材が見つかるので利用するといいでしょう。

作成したアイコンは「apple-touch-icon.png」という名前のpng形式で保存すればOK。サイズは色々と議論の余地があるのですが、iPhone5や6を想定して144×144で作っておくのが良いらしいです。

作成したアイコンをFFFTPなどのファイルアップロードソフトでサーバーに格納します。ルートディレクトリへ保存すればOKです。

あとはソースを修正するだけ。修正するソースはheader.phpです。
以下のlinkタグが記述されている箇所をFindで見つけます。

[php]

[/php]

これで完了。

詳しい設定内容や意味についてはTAG indexさんのサイトでわかりやすく解説されているので、見てみるといいでしょう。