iOS7用のホームアイコンの設定

もうすぐiOS7がリリースされるそうなので、 Webアプリでホーム用アイコンを設定しているプロジェクトはアイコンのデザイン調整の対応を検討しないとなーと思って調べたメモです。

iOS6/5用のアイコンは 114px四方なのに対してiOS7用のアイコンは120px四方なので、 link要素(rel=apple-touch-icon)のsizes属性で各OS用に切り替えることができそうです。

iOS7のアイコンは角丸の具合をふくめたアウトラインと内部のグリッドが変わったので、角丸に合わせたスタイリングがしてあるものとか四隅に要素が隣接しているものは調整したほうが良い気がしました。

いったんiOS7の端末にインストールしてみてから検討すればいいと思いますが、個人的にはフラットかどうかよりも四隅の余白のバランスに違和感を感じるものが多かったです。

納品後のプロジェクトとかでも、こういうのは対応してあげたいんですけどねー。