[配布] iPadアイコン152px iOS7 Safariサイト用ショートカット画像
1,780views／投稿 2013-11-25／更新 2019-04-30
iPad用アイコンはiPhone用アイコンより大きいです。iPhoneの120px四方だとRetinaディスプレイであるiPad AirやiPad miniではやや荒くフル解像度の見え方ではありません。
- iPad（152×152px）
- iPhone（120×120px）
２つ両方を用意する必要はなく、iPad用の大きなアイコンを配置しておけばiPhoneでも縮小されて使われ大は小を兼ねます。iOS7からはフラットデザインになってiOS6以前のような光沢はなくなりました。角丸も以前より丸くなり少しRの形が違います。
以前にiPhone用を
iPhoneのiOS用アイコンIllustratorデータを配布してますが、今回はiPad用152pxのアイコンの配布です。
ダウンロードはPhotoshopやIllustrator環境であるMacやPCでダウンロードしてもらった方が確実ですが、iPhoneでもEvernote等に保存もできます。以前の配布ではDLリファラーを見るとiPhoneからダウンロードしていらっしゃる方が相当いますが、ダウンロードZIPファイルへのURLであり、ページへのリンクではありません。
【iPad用 Illustratorダウンロード】
ios7-ipadshortcuticon.zip
アイコン設置方法
apple-touch-icon.pngのファイル名にしてPNGアイコン画像をドメインの第一階層にアップロードして設置します。Safariでホーム画面に追加／ブックマークされるとiOSがサイトのTLDトップレベルドメインのルートディレクトリに画像がないかfaviconのように探すようになっています。
またデバイスによっていろいろファイルがないかiOSが探しますが、この152pxの一番大きなiPadアイコン画像があれば他のiPhoneやiPodでも同じようにサイズを収めて適用されます。
ファイル名
apple-touch-icon.png←（これだけでOK）
apple-touch-icon-precomposed.png
iOS7 iPad用
apple-touch-icon-152x152.png
apple-touch-icon-152x152-precomposed.png
iOS7 iPhone用
apple-touch-icon-120x120.png
apple-touch-icon-120x120-precomposed.png
iOS6以前iPhone用
apple-touch-icon-114x114.png
apple-touch-icon-114x114-precomposed.png
全てを用意する必要はなく、apple-touch-icon.pngを152pxで作っておけば万全です。設置方法はドメインルート第一階層に画像アップロードしておくだけで下階層ページでも機能します。-precomposed.png付きのファイルはiOS6時の光沢なし設定でiOS7にはもう不要に思えますがサーバーのエラーログを見ると出てますね。
iOSが探している痕跡ですが、-precomposed（前もって用意された）はiOS7では不要でしょう、光沢は出ませんので。
Safariからホーム画面に追加されることにより、サイトtitleの一部がiOS全体のSpotlight検索に引っかかりトップヒットや分類されてアイコン画像付きでiOS内検索（Spotlight）で出てきます。
iOS7のSpotlightは任意のアイコンを下にスワイプすると検索バーが出てきます。ブックマークとしてユーザーが登録してもこのアイコンが検索で出てきます。
アプリでないサイトであってもアイコンをしっかり設置しておくことで見た目はアプリのように認識され易く視認性も上がります。スマホサイトの方は必須なショートカットアイコンですので、しっかり準備しておきたいiOSアイコンです。
