1. Home
  2. Archive
  3. iPhoneでWebページのアイコンを表示させる方法

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

あけましておめでとうございます!今年もヨロシクお願いいたします。今年はPerlとiPhoneを勉強したいと思ってます!

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

iPhoneキャプチャ

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

iPhoneキャプチャ2

まず、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 for iPhone OS: Specifying a Webpage Icon for Web Clip

コメントフォーム

※HTMLタグは使用できません。