iPhoneやiPadなどのiOSのSafariでは、任意のサイトをアプリのようなアイコンとしてホーム画面に追加できる「Webクリップ機能」があります。
要するに、お気に入りのサイトを”アイコン化して”ホーム画面に置いておける機能ですが、この時のアイコンって指定できるんですね。今更ながら知ったのでメモ。
指定がないと、ページ全体のキャプチャ画面を縮小したようなアイコンになってしまいます。

方法1:アイコン画像を”特定のファイル名”にすることで指定する方法

Webクリップ用のアイコン画像を以下のファイル名で用意し、ルート直下に置く
エンボス効果有り ”apple-touch-icon.png”というファイル名にする
エンボス効果無し ”apple-touch-icon-precomposed.png”というファイル名にする

方法2:<head>の中にリンクタグの記述を加えることで指定する方法

エンボス効果有り <link rel=”apple-touch-icon” href=”xxx.png”> を追加
エンボス効果無し <link rel=”apple-touch-icon-precomposed” href=”xxx.png”> を追加
hrefで参照するWebクリップ用のアイコン画像名”xxx.png”は任意

Webクリップアイコン

Webクリップアイコン

ここで言うエンボス効果というのは、iOSアプリでよく見る、例の光沢のある感じのアイコンにしてくれる効果のことを指しています。
作る画像のサイズは、特に決まりがないというか、自動でリサイズして表示してくれますが、高解像度化が進んでいるので、ある程度ピクセル数の大きい画像の方がいいのかもしれません。
上のスクリーンキャプチャの”OURCELL.net”というサイトの画像は200px × 200pxで作ってみましたが、まあまあ良い感じにできました。
角丸のような加工は勝手にやってくれるので、用意する画像は正方形の画像でOKです。