ウェブクリップアイコンの設置方法

スマートフォンサイトを作ったら、ウェブクリップアイコンを設置してみましょう。ウェブクリップアイコンとは、iPhoneなどでホーム画面に追加をする際に表示されるアイコンのことです。PCで表示されるfavicon（ファビコン）みたいなものですね。特に何も設置しなければ、そのページのキャプチャ画面がアイコンとして表示されます。

ウェブクリップアイコンの作り方

まずは、画像の作成ですが、正方形で作成します。画像は自動的にリサイズされるので、サイズは少し大きめに作っておくと良いでしょう。（ちなみにこのサイトでは144px×144pxで作成しています。）
作成したら、ファイル名を「apple-touch-icon.png」として、png形式で保存します。この形式で保存すると、iPhoneでは、自動的に角丸に変換して、ハイライトがかかったような感じに仕上げてくれます。もし、ハイライトなどの処理をかけたくない場合は、「apple-touch-icon-precomposed.png」というファイル名で保存すれば、角丸になるくらいで、その他の処理はかからないようになります。
あとは、画像をルートディレクトリにアップロードして、head要素内に読み込めば設置は完了です。

<link rel="apple-touch-icon" href="ファイルの置き場所" />

以上が、ウェブクリップアイコンの作り方と設置方法となります。