iPhoneのホーム画面にショートカットアイコンを設置する方法

こんにちはYです。気づけばもう10月ですね。
本日はiPhoneのホーム画面に指定のショートカットアイコンを設置させる方法です。

具体的に言いますと、
気に入ったWebページをホーム画面上のアイコンとして表示させて
すぐページを開けるようにするためのものです。

正式名称は「apple-touch-icon」といいます。
一応公式の設定方法です。
Configuring Web Applications

う～んよくわからん。


ということでわかりやすくまとめます。


■画像ファイルの用意

拡張子は.pngで正方形にしてください。
そして、画像のサイズですが、これがちょっと曲者で
faviconのように決まったものはなく、OSやブラウザによって最適なサイズが違うため、57*57pxから152*152pxくらいです。
もし厳密に行いたい場合は、
sizes="152x152"
sizes="144x144"
sizes="120x120"
sizes="114x114"
sizes="76x76"
sizes="72x72"
このようにそれぞれの端末の最適な画像サイズを指定してあげる必要があります。
今回はあまり気にせず、152x152で用意します。

apple-touch-icon-precomposed.pngとは？
アイコン画像はそのままでは、機種によっては影がついたり、ハイライトがついたりがと自動で表示されてしまいます。

これを防ぎたい場合は、画像名の後ろに「precomposed」をつけることで回避することができます。
今回は使いません。


■ファイルの配置の仕方

アプリケーションルートに置けば完了です！

もし場所を変えたい場合は

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

と指定する必要があります。

この手順で完了です。お試しあれ。