Webtech Walker

iPhoneでWebページのアイコンを表示させる方法

iPhoneでWebサイトのショートカットをホーム画面に追加するとき、何もしてないと以下のようにサイトのキャプチャが表示されます。

アイコンがサイトのキャプチャになっている

これだとちょっとかっこ悪いのから、ちゃんとしたアイコンを表示させたいと思ったのでアイコン表示させてみました。

アイコンが表示されている

まず、57px×57pxのpng画像をつくります。表示させる方法は二つあって、作成したpngのアイコンをapple-touch-icon.pngかapple-touch-icon-precomposed.pngという名前でドキュメントルート直下に置く方法。二つの違いは、自動的に上半分にテカリの加工されるか、されないかです(apple-touch-icon.pngのほうは加工される)。

もう一つの方法はhead内に以下のlink要素でアイコンファイルを指定する方法。この方法だとページ毎にアイコン指定できたりします。

<link rel="apple-touch-icon" href="xxx.png" />

詳細は公式リファレンスにて。

Safari Web Content Guide: Configuring Web Applications

このエントリーをはてなブックマークに追加