Microsoft Edgeの「スタート画面にピン留めする」にちゃんと対応する方法

2016/07/22 00:18
カテゴリー: Windows 10, Windows Phone

最近Insider向けのMicrosoft Edgeが更新されて、ウェブページをスタート画面にピン留めした際に、従来のEdgeアイコンではなくて、そのサイトのFaviconが表示されるようになりました。

実はこのタイルって前からちゃんと対応する方法があるんですけど、めんどくさいだけなのか方法が知られていないのか、はたまたブログサービスが対応していないのか、Windows好きな方のサイトやブログでも対応していないことが多いようで・・・。

方法としては、

  1. browserconfig.xmlファイルを作って
  2. 下記のコードを書いて
  3. 対応するサイズの画像を用意して
  4. サイトルートにまるごとアップロード

です。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
 <msapplication>
  <tile>
   <square70x70logo src="/mstile-70x70.png"/>
   <square150x150logo src="/mstile-150x150.png"/>
   <square310x310logo src="/mstile-310x310.png"/>
   <wide310x150logo src="/mstile-310x150.png"/>
   <TileColor>#ffffff</TileColor>
  </tile>
 </msapplication>
</browserconfig> 

TileColorは好きな色で。

規定のやり方通りにルートに置く場合なら特にbrowserconfig.xmlへのリンクを書く必要はありませんが、そうでない場合には<head></head>内に下記を追加。

<meta name="msapplication-config" content="path/to/browserconfig.xml" />

ちゃんと設定してあげると、こうなります。

Mobile版タイル。

Mobile版タイル。FaviconのままのGoogleとの差は歴然。

PC版タイル。

PC版タイル。Anniversary Update以降は最大サイズのタイルも対応

画像サイズ用意したり色々めんどくさいよー。という方は下記のサイトでAndroidやiOS用のアイコンもろとも簡単に作れます。

realfavicongenerator.net

大事なサイトやブログ、ピン留め後の姿も美しくしてみませんか?