スマホアイコン

せっかく作ったスマートフォンに対応したサイトなら、細かい所までケアしたいものです。このアイコンの指定方法、実は簡単です。headタグ内に以下を追加して、アイコン用の画像を用意するだけで指定できます。

<link rel="apple-touch-icon" href="画像パス" />
アイコン画像の仕様については以下にまとめておきます。

項目 説明
アイコン画像
サイズ 114×114ピクセル
（但し、正方形であれば57ピクセル以上でも可）
アイコン画像
フォーマット gif,jpg,png,bmpいずれも可

ちなみにアイコン画像は勝手に「つや出し効果」と「角丸」にしてアイコンっぽくしてくれるので、画像を作成するときはその辺は気にしないで大丈夫です。

角丸は防げないですが、もし勝手な効果をつけたくない場合はapple-touch-iconをapple-touch-icon-precomposedとすれば良いです。あとアイコンのタイトルはtitleタグの内容がデフォルトで適用されます。以下が今回作成した画像。

デフォルトタイトルを変更したければ
<meta name="apple-mobile-web-app-title" content="ほげほげ" />