読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

browserconfig.xmlとはなんだ問題

HTML Web

某サービスのエラーログを見てての気付きです。
聞き慣れないファイルやなーと思って調べてみたのでメモ。

browserconfig.xml

Windows8とかでIE11を使ってると、サイトをスタート画面にピン留めできる機能があるらしいです。

で、そのピン留めをするとその見た目用のファイルをリクエストしてくるらしく、その親玉がbrowserconfig.xmlというわけです。

どうやって用意するか

Create a Windows 8.1 tile for your site - Build My Pinned Site - Microsoft Internet Explorer

ココで作ります。
サイトの指示にしたがって、

  • サイト名やらテーマカラーを入力
  • サムネイルをアップロード
  • 必要なサイズにトリミング
  • RSSがあればそのURL
  • ダウンロード

これをやると、以下のzipが手にはいります。

- README.txt
- browserconfig.xml
- large.png
- square.png
- tiny.png
- wide.png

記述としては

2パターンあります。
画像の配置は必須ですが、browserconfig.xmlは置かないパターンと置くパターンがあるっぽい。

置かないパターン

<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>

置くパターン

<meta name="application-name" content="アプリケーション名">

browserconfig.xmlをドキュメントルートに配置することで、
中身を勝手に見て上述の画像たちにたどり着いてくれる。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="tiny.png"/>
      <square150x150logo src="square.png"/>
      <wide310x150logo src="wide.png"/>
      <square310x310logo src="large.png"/>
      <TileColor>#000000</TileColor>
    </tile>
  </msapplication>
</browserconfig>

こういうファイルなので、これも適当にパスを調整すれば画像が散らばらなくて良い。

いや、なんでやねん

ただでさえapple-touch-iconだのfaviconだので何種類もサイズ用意して煩雑やなーと思ってんのに!
そんなところに追い打ちとかほんとひどい!!