2014年5月18日

iOS 7のapple-touch-iconサイズ

iOS 7でUIがフラットデザインに変更され、apple-touch-icon(Webクリップアイコン)の仕様も変更されています。

思い切り今更ですが、iOS 8が発表される前に、覚え書きとして。

まず、ひとつ目の変更点は、これまでデフォルトの「apple-touch-icon.png」では自動的に光沢処理が行われていましたが、iOS 7では「apple-touch-icon-precomposed.png」と同様に、光沢処理は行われなくなりました。

次に、アイコンサイズが変更されました。変更前(iOS 6.xまで)と変更後(iOS 7以降)の、デバイス別のアイコンサイズは、次のとおりです。

iPhoneiPad
Retina標準Retina標準
iOS 7120×12060×60152×15276×76
iOS 6114×11457×57144×14472×72

ただし、iOS 7はiPhone 4以降にしか対応しておらず、実際にiOS 7が稼働するiPhoneは、すべてRetinaディスプレイということになるので、アイコンサイズが「60×60」のデバイスは存在しません。

iOS 7とiOS 6向けに、各サイズのアイコンを用意するには、iOS 7で3種類、iOS 6で4種類が必要になります。また、今後、より高解像度のiPhoneが発売されると、iOS 8では「180×180」というサイズが追加されるかもしれません。

最後に、apple-touch-iconの一覧です。

ファイル名対応OS対応デバイス光沢処理
apple-touch-icon-57x57-precomposed.pngiOS 6以前iPhoneなし
apple-touch-icon-57x57.pngiOS 6以前iPhoneあり
apple-touch-icon-72x72-precomposed.pngiOS 6以前iPadなし
apple-touch-icon-72x72.pngiOS 6以前iPadあり
apple-touch-icon-76x76-precomposed.pngiOS 7以降iPadなし
apple-touch-icon-76x76.pngiOS 7以降iPadなし
apple-touch-icon-114x114-precomposed.pngiOS 6以前Retina iPhoneなし
apple-touch-icon-114x114.pngiOS 6以前Retina iPhoneあり
apple-touch-icon-120x120-precomposed.pngiOS 7以降Retina iPhoneなし
apple-touch-icon-120x120.pngiOS 7以降Retina iPhoneなし
apple-touch-icon-144x144-precomposed.pngiOS 6以前Retina iPadなし
apple-touch-icon-144x144.pngiOS 6以前Retina iPadあり
apple-touch-icon-152x152-precomposed.pngiOS 7以降Retina iPadなし
apple-touch-icon-152x152.pngiOS 7以降Retina iPadなし
apple-touch-icon-precomposed.pngiOS 2以降共通なし
apple-touch-icon.pngiOS 1.1.3以降共通あり

関連記事

0 件のコメント: