[配布] iOS7 iPhoneショートカットアイコン画像データSafariホーム画面に追加
3,383views／投稿 2013-09-30／更新 2019-04-30iOS7になって以前よりもショートカットアイコンの角丸がさらに丸くなりiPhoneは、114px→120pxと少し大きくなり光沢も消えました。ホーム画面に追加される時の画像でもあり大切なWEBデータです。Illustratorなどで編集できるベクター画像データを作ったので配布します。
配布データのダウンロード ios7-iphoneshortcuticon.zip
目次
ホーム画面に追加：ショートカットアイコン設置方法
ドメイン直下の第一階層ディレクトリにPNG画像を１つ設置するだけです。
ファイル名は、
apple-touch-icon.png
にします。こうするだけで、iPhoneのSafariが第二階層や第三階層のページ閲覧の時でも第一階層にあるアイコン画像を探して適用させてくれるので１つで済みます。第一階層に画像を置く場合はhead情報（metaデータ）の記述は必要ありません。<head>内に書くことで画像場所は指定できますが、特別な理由でない限りHTMLソースもスッキリしますし、画像の配置だけで良いでしょう。
<link rel="apple-touch-icon" href="/第二階層等/apple-touch-icon.png" />
しかし、
Androidも対応させたい場合は記述が必須になります。Androidスマホも実はAndroid2.3からこのWebClipアイコン（ホームにショートカット作成）には対応しています。残念ならが<head>部分に情報を書かないと画像のアップロード配置だけではAndroidは機能しません。また、なぜかドメイントップページのみ有効で個別記事エントリーやカテゴリーページに記述してもAndroidバージョン2.3.3では適用されませんでした。
Androidにも対応させるためhead記述
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
配布データの使い方
IllustratorやPhotoshopを使っていれば説明は要らないと思います。ベクターデータ（アウトライン線アンカーポイント編集可能）を扱うソフトを全く持っていない場合は、当記事の画像がそのまま巨大PNG画像になっているので、それを切り抜くなり色を換えてみるなりしてください。配布データは、Illustratorバージョン9まで下げてあるので開けないことはないと思います。
配布のios7-iphoneshortcuticon.zipには.ai .eps .pdfの３種類の同じデータが入っています。
グラデーションはiOS7標準のメールや電話で使われていて綺麗ですね。枠線はiOS7用の角丸角度になっています。レスポンシブが当たり前になり領域有効活用・デバイス違いなどデザイン的に装飾で不備が出たりしないのもフラットデザインの特徴です。しかし欠点はボタンなのか見出しなのかの視認性が下がる事。ボタン状の押したくなる視認性が高いChromeなどGoogleアプリ系ボタンのようなものも入れてあり、おすすめです。
1pxまで気を配るプロのために
肉眼では極めて確認しづらいですが、ピッタリの角丸PNG画像でも角丸Rエッジ部分が1px程 微妙に黒ずむ（明るめアイコンでiPhone壁紙も明るい）場合があります。その時は正方形で作るとiOS側でしっかり切るので1pxの黒ずみもなくなりました。配布データの中にも書いてあります。
光沢を消すか？付けるか？
iOS7になってからフラットデザインになり、以前のiOSのようなカプセル状のカバーが付かず、画像そのままがアイコンとして追加されることになりました。以前は光沢を付けない場合には、
apple-touch-icon-precomposed.png
というファイル名の画像もアップロードして置くことで光沢グレアは付かずにできる方法がありました。iOS7でカプセル状で見せたければ既にカプセル状にした画像をアップしておけば良いだけです。そこで少し悩むところ…iOS6とiOS7両方に対応するために…どうすれば良いか？WEBスキルアップ君的な解答はズバリ「iOS6は無視」です。
WindowやMacOSでもないので、またAppleのOSバージョンアップ率はWindowXPのようなことにはならないのでiOS7に合わせれば良いと思います。フラットでやるとして、-precomposed（用意されている）光沢の付かない用画像をiOS6以下のために設置するところまでは考えなくても良いと思います。またAndroidでもapple-touch-iconが有効な端末も光沢は付かないですので。
サーバーのエラーログでわかる事
またにレンタルサーバーのエラーログを見てみてください。レンタルサーバーの管理画面やコントロールパネルをから大体のサーバーなら見られます。ファビコンfavicon.icoを設置していないサイトは無数に各種ブラウザからの自動アクセスが404Not Found的なエラーが出ている事でしょう。iOSのショートカットアイコン同様ファビコンも第一階層に置くだけです。ここにたまにapple-touch-icon-precomposed.pngの見つからないエラーが出ていたりします。iOS7未満でさらにSafariでホーム画面に追加しようとしてくれた痕跡と考えてよいでしょう。
変更したフラットの具合
こんな感じでフラットなアイコンにすると印象が少しiOS7っぽく変わります。
光沢っぽくみえる色の切り替えしはしてありますが、当サイトの場合変更してこのようなニュアンスになりました。ドロップシャドウや枠線・ラウンドグレアは付いていません。
ということで長くなりましたが、WEBスキルアップ君に今後もすばやくアクセスできるようにiPhoneでホーム画面にアイコンを追加しておいてください。
最後に、Photoshopデータ特典
（TVショッピング風に）配布ベクターデータに加えて、ここまで読んでいただいた感謝の気持ちを込めて今回は、な・なんとカプセル状グレア画像もすぐ作ることのできるPhotoshopデータもお付けいたします。
このPhotoshopデータの最上段レイヤー（ハードライト）を表示／非表示で具合を見てみてロゴ画像やショートカットアイコンにはやっぱり光沢が必要でしょうよ!! と思われる場合は是非使ってみてください。
配布Photoshopデータのダウンロード apple-touch-icon.zip
