apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた
今日は、WebサイトがiPhone、iPad、Android、Windows 8などでホーム画面などにブックマークされた際のアイコン（Webクリップ）を設定する仕様について調べてみました。あなたのサイトでは設定済みですか？
以前に「iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう」という記事でiPhone・iPad向けアイコンについて説明しましたが、その後、新しいデバイスが発売されたりプラットフォームが増えたりしたので、アップデートです。
iPhone、iPad、iPod touch向けのWebクリップ
基本は「apple-touch-icon.png」というファイル名でWebクリップ用のアイコンを作って、サイトのルートディレクトリに配置します（「/apple-touch-icon.png」）。
ただし、デバイスやOSごとにサイズが違うので、複数用意します。
| 標準ファイル名 | サイズ | 対象 |
| apple-touch-icon-152x152.png | 152px×152px | Retina版のiPad、iPad mini用、iOS 7以降 |
| apple-touch-icon-144x144.png | 144px×144px | Retina版のiPad、iPad mini用、iOS 6以前 |
| apple-touch-icon-120x120.png | 120px×120px | Retina版のiPhone、iPod touch用、iOS 7以降 |
| apple-touch-icon-114x114.png | 114px×114px | Retina版のiPhone、iPod touch用、iOS 6以前 |
| apple-touch-icon-76x76.png | 76px×76px | 非Retina版のiPad 2、iPad miniの用、iOS 7以降 |
| apple-touch-icon-72x72.png | 72px×72px | 非Retina版のiPad 2、iPad miniの用、iOS 6以前 |
| apple-touch-icon.png | 57px×57px | 昔のiPhoneなど標準サイズ |
アイコン作成時の注意点は以下のとおり。
- インターレース化はしないこと。
- 標準の24bit PNGを推奨
- Webセーフカラーは意識する必要なし
iOS 7版の仕様では60pxが標準サイズとされているようですが、大きなサイズを指定しておけば標準サイズが読み込まれることはないと思いますので、上記の表では、以前のiOSの仕様に基づいて57pxを標準サイズとしています。
上記の各ファイルをルートディレクトリに置いておけば、まずはそれでOKなのですが、できれば、各HTMLの<head>内で次のようにlink要素でアイコンファイルを指定しましょう（理由は後述のAndroidのセクションで）。
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">ちなみに、iOS 7より前のデバイスのSafariは「apple-touch-icon.png」を見に行く前に、輝く感じのエフェクトなどを前処理済みの「apple-touch-icon-precomposed.png」を探しにいく仕様でしたが、iOS 7のSafariは「-precomposed」のついたファイル名は扱わないようです。
サーバーに404エラーログが残るのが気にならなければ、「-precomposed」付きのファイル名は気にせずにおくのが良さそうです（作るならアイコンを14種類作って指定しなきゃいけなくなるので）。
- Safari Web Content Guide: Configuring Web Applications
- iOS Human Interface Guidelines: Icon and Image Sizes
Android向けWebクリップ
Android用のWebクリップアイコンの公式な仕様は、探してみたのですが見つかりませんでした。こちらは標準ブラウザのほかChromeなどがあったり、シェルも各社が提供してますから、1つの決まった仕様というのはないのかもしれませんね。
ただ、原則としては、iPhone向けのapple-touch-iconを、<head>内の<link>で指定しておけば問題ないようです（Android向けChromeのバージョン31以降はsizes属性も認識するとのこと）。
Androidのバージョンや端末によって異なるようですが、アイコンをサーバーに置くだけではダメで<link>要素がないと認識されないという場合もあるようなので、ちょっと面倒ですが<link>を出力するようにテンプレートを設定しておくのが良さそうです。
また、Androidでは<link>で書くアイコンのパスは「http:」から始まる完全なURLを指定しなければいけないという情報もあるようです。
- Everything you always wanted to know about touch icons（Mathias Bynens）
Windows 8のWebクリップ
Webサイトのエラーログで「browserconfig.xml」というファイル名へのアクセスが記録されているのを見たことがあるかもしれません。
これは、Windows 8やIE 11でサイトを「ピン」するときのアイコンなどを指定するファイルです。
ただ、こちらは面倒な仕様を確認するよりも、マイクロソフトが提供しているツールを使ってアイコンや設定ファイルを自動作成するのが楽なようです。
- Web サイトを Windows 8.1 のタイルにしよう - Web サイトをピン留めする（Microsoft Internet Explorer）
上記のサイトで、タイトルと背景色を指定して、基本となるアイコン画像をアップロードするだけで、基本セットを作ってくれます（RSSフィードを指定して更新プッシュ通知も設定できます）。
最後の「コードを入手」でmetaタグが表示されますが、「パッケージをダウンロード」して、中のアイコンとbrowserconfig.xmlをWebサーバーのルートディレクトリに配置して、HTMLの<head>内にサイト名を指定するタグを次のように入れるだけで問題ありません。
<meta name="application-name" content="Web担当者Forum"/>各種iPhone端末やWindows 8.1でのテストなど細かい点の確認はできていないのですが、各種仕様に基づいて調べてみた結果です。
細かい点の違いやAndroid版のノウハウなどありましたら、ぜひご指摘ください。
安田 英久（やすだ・ひでひさ）
株式会社インプレス
Web担当者Forum 編集統括（初代編集長）
プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、Webサイト 「Web担当者Forum」初代編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開いる。現在は編集統括として媒体に携わる。
個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。
- Twitter：@Hidehisa
- Facebook：https://www.facebook.com/hidehisa.yasuda
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
デジタルマーケティングの即戦力を2日間で育てます！ 第24期「企業Web担当者 初級講座」6/13・6/14【2024年6月度】
4,867 いいね！「第6回 Googleアナリティクス4実践講座～GA4を使いこなす！ 計測設定からレポート・分析活用まで」オンライン開催
1,164 いいね！Web担 編集後記 2024年3月
441 いいね！ライオンでアドビのCMSを導入！ 導入の背景や活用方法を聞いた
432 いいね！話題の「ChatGPT」こんなに使えたら本当にすごい！ 目からウロコの使い方を解説｜GPTs活用事例も
289 いいね！【広告主・マーケター限定】デジタルマーケターズサミット 2024 Winter 2/28、29オンラインLIVE配信
258 いいね！【満員御礼】「GA4祭り」をテーマにアクセス解析の専門家が集結！ 3月21日（木）＠渋谷【Web担当者Forum Meet UP #2】
88 いいね！生成AI「Copilot」でMicrosoft 広告はどう変わる？ ―Web担編集長・四谷が根掘り葉掘り聞いてきた！
85 いいね！
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
ソーシャルもやってます!