iPhoneでWEBサイトをブックマークして、ホーム画面にアイコンを設置する方法のまとめです。
今回はアプリのお話ではありませんが、「アイコン画像をどのサイズで用意すれば良いのか？」を考える上で、iPhone、iPad、Android アプリのアイコン画像サイズのまとめの記事でも紹介させていただいたアイコンサイズも参考にしています。
アイコンのサイズを決める
iPhoneのアイコン画像は、昔のモデルだと 57 × 57 pxで作っていましたが、Retina ディスプレイ対応のモノだと約倍のサイズ（114px）の画像を用意する必要があります。アプリだとiTunesArtwork用に1024pxというデカいサイズも必要…かもしれませんが、今回のようにスマホサイトのブックマーク用だとそこまで大きなサイズは不要かと思います。
iPadのRetina向けに144pxというサイズがありますので、114〜 144pxあたのモノが良さげかな。。。
ということで、今回は144pxで作ってみます。
iPhone ホーム画面用のアイコンを設置
ここからがようやく本題ですが、Photoshop で用意した以下のアイコン画像を iPhone のホーム画面に置いてみることにします。
apple-touch-icon と apple-touch-icon-precomposed の違い
アイコン画像をFTPでサーバにアップし、HTMLファイルの<head>内に以下のようなlinkタグを挿入します。|
1 2 3 |
<head> <link rel="apple-touch-icon" href="アイコン画像の設置場所" /> </head> |
apple-touch-iconで、iPhoneのホーム画面に設置するアイコン画像を指定することができます。
apple-touch-iconを使うとiPhone特有のグラデーションの効いたアイコンになりますが、このような効果を付けたくない（単に角丸だけのアイコンにしたい）場合は、apple-touch-icon-precomposedを使います。
※アイコンの見え方の違いは、記事の最後に掲載しています。
|
1 2 3 |
<head> <link rel="apple-touch-icon-precomposed" href="アイコン画像の設置場所" /> </head> |
iPhone で WEBサイトをブックマーク
※今回は実機検証にiPod touch（iOS 6）を使っています。Safariでサイトへアクセスし、下のメニューバー中央のアイコンをタップします。
「ホーム画面に追加」という選択肢がありますのでタップします。
名称を編集して右上の「追加」ボタンをタップします。
HOME画面にアイコンを設置できます。
上記画像で、左がapple-touch-iconによるアイコンで、右がapple-touch-icon-precomposedによるアイコンです。
コメント