カスタム タイル(ブラウザコンフィグ画像)がないとサーバでエラーログを吐く件。


以前、サーバを管理してくれているエンジニアさんから、「favicon.ico(ファビコン画像)がないと大量のエラーログが出てしまい、邪魔なんでfavicon代わりに透明GIFを入れといた」と言われたことがあります。
favicon.ico(ファビコン画像)とは、ブックマークしたときに付くちっちゃな画像のことです。

で、改めてカスタム タイル(ブラウザコンフィグ画像)の話。
カスタム タイルとは、Windows8や10で、IE11(又はEdge)のユーザーがサイトをピン留めしたときに、スタート画面に表示されるもので、例えば下記のような

NHKの四角い画像とピンク色のこのブログの画像がそうです。
(タイルの下につくサイト名は画像ではなく、勝手に表示されるテキストです)

画像がなくてもブラウザのアイコンと勝手に表示されるテキストで四角いタイルが表示されます。
実際に、サイトをピン留めしたとか、使っている人を知らないので、カスタム タイルはユーザーにもあまり定着していないのではないでしょうか。
同じくWeb制作者にとってもあまり意識していないので、カスタム タイル(ブラウザコンフィグ画像)は作らないことが多いと思います。

ただ、このカスタム タイルを指定する「browserconfig.xml」がルート直下にないと、やはりサーバでエラーログを吐き出してしまうとのことで、これも前出のサーバ管理のエンジニアさんが、「テキトーに入れといたのであとで上書きしてください」と言われて作った経験があります。

上記のNHKさんの「browserconfig.xml」(http://www.nhk.or.jp/browserconfig.xml)
を見ると

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

きちんと小サイズ(70×70)、普通サイズ(150×150)ワイド サイズ(310×150)、大サイズ(310×310)が用意されていますね。

このブログは小サイズと普通サイズの画像しか入れてないので下記。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="img/tile_small.png"/>
<square150x150logo src="img/tile.png"/>
<TileColor>#ed5050</TileColor>
</tile>
</msapplication>
</browserconfig>

まあ、このブログに関しては、ピン留めしてくれる人もいないでしょうし、自分自身、EdgeもIE11も殆ど使ってないので、ブログの記事説明用に作っただけですが、ご興味のある方は作って設定されてはいかがでしょうか。

画像のサイズやbrowserconfig.xmlに関してはマイクロソフトのページに説明があります。


コメントを残す

メールアドレスが公開されることはありません。