編集長ブログ―安田英久
apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた

WebサイトがiPhone、iPad、Android、Windows 8などでホーム画面などにブックマークされた際のアイコン

今日は、WebサイトがiPhone、iPad、Android、Windows 8などでホーム画面などにブックマークされた際のアイコン(Webクリップ)を設定する仕様について調べてみました。あなたのサイトでは設定済みですか?

以前に「iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう」という記事でiPhone・iPad向けアイコンについて説明しましたが、その後、新しいデバイスが発売されたりプラットフォームが増えたりしたので、アップデートです。

iPhone用Safariなどで、ブックマーク追加メニューから「ホーム画面に追加」を選んだときに、ホームに追加される「Web Clip(ウェブクリップ)」アイコンの設定方法です。

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種類作って指定しなきゃいけなくなるので)。

参考:

Android向けWebクリップ

Android用のWebクリップアイコンの公式な仕様は、探してみたのですが見つかりませんでした。こちらは標準ブラウザのほかChromeなどがあったり、シェルも各社が提供してますから、1つの決まった仕様というのはないのかもしれませんね。

ただ、原則としては、iPhone向けのapple-touch-iconを、<head>内の<link>で指定しておけば問題ないようです(Android向けChromeのバージョン31以降はsizes属性も認識するとのこと)。

Androidのバージョンや端末によって異なるようですが、アイコンをサーバーに置くだけではダメで<link>要素がないと認識されないという場合もあるようなので、ちょっと面倒ですが<link>を出力するようにテンプレートを設定しておくのが良さそうです。

また、Androidでは<link>で書くアイコンのパスは「http:」から始まる完全なURLを指定しなければいけないという情報もあるようです。

参考:

Windows 8のWebクリップ

Webサイトのエラーログで「browserconfig.xml」というファイル名へのアクセスが記録されているのを見たことがあるかもしれません。

これは、Windows 8やIE 11でサイトを「ピン」するときのアイコンなどを指定するファイルです。

参考:

ただ、こちらは面倒な仕様を確認するよりも、マイクロソフトが提供しているツールを使ってアイコンや設定ファイルを自動作成するのが楽なようです。

便利ツール:

上記のサイトで、タイトルと背景色を指定して、基本となるアイコン画像をアップロードするだけで、基本セットを作ってくれます(RSSフィードを指定して更新プッシュ通知も設定できます)。

最後の「コードを入手」でmetaタグが表示されますが、「パッケージをダウンロード」して、中のアイコンとbrowserconfig.xmlをWebサーバーのルートディレクトリに配置して、HTMLの<head>内にサイト名を指定するタグを次のように入れるだけで問題ありません。

<meta name="application-name" content="Web担当者Forum"/>
◇◇◇

各種iPhone端末やWindows 8.1でのテストなど細かい点の確認はできていないのですが、各種仕様に基づいて調べてみた結果です。

細かい点の違いやAndroid版のノウハウなどありましたら、ぜひご指摘ください。

この記事が役に立ったらシェア!
tweet106このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

勝手広告
企業広告を消費者や第三者が勝手に作って公開する自主制作の広告。 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore