先日、うちのサイトをよく訪ねてくれる方からこんな要請がありました。
「iPhoneのホーム画面にブックマークしてるんだけど、アイコンを表示する仕組みにしてほしい」
うちのWebサイトのアイコン（ロゴ）は構想だけはあったんですが、私の技量が追いつかず、作成できていなかったんですよね。
で、iPhoneのホーム画面にも出せるようになったので、そのメモです。
まず、アイコン用の画像ファイルを用意します。
私はPNG形式をお勧めします。
最近の端末であれば対応しているものが多く、可逆圧縮形式なのでJPEGのように歪みが生じないためです。
少し前のIEだと対応しないものもありましたが最近のIEではPNGもファイビコン（Webページのアイコン）として認識してくれます。
サイズはiPhoneの場合、57*57が良いらしいですが、私は既存の48*48の画像を使っています。
で、最初はWebページの一般的なファビコンの指定の仕方。
<link rel="shortcut icon" href="画像ファイルパス" type="image/png" />
最初はこの指定だけで行けるかなぁと思ったんですが、iOS端末はNGでした。
調べてみると専用のタグ指定方法があることが分かりました。
以下のタグを使うとホーム画面に表示する画像を指定できます。
<link rel="apple-touch-icon" href="画像ファイルパス" />
ちなみに、角を丸める処理はiOS側で勝手にやってくれるので、用意するのは一般的な正方形の画像でOKです。
これでうちのサイトのロゴも表示できるようになりました。
明日、要望を出してくれたユーザーに回答しようと思います♪
↓↓こちらの記事もどうぞ↓↓
コメント