URAMIRAIKAN

1020のなれの果て (since 2005.6.19)

Faviconとかライブタイルとか

 暇つぶしにWEBサイトのメンテとかしてました。
 そのついでにFaviconをマルチサイズにしたり、ライブタイルの設置方法とかも調べてみました。


 マルチサイズのアイコンを作るのには定番の「X-Icon Editor」を使いました。
 事前に準備した画像をインポートして、サイズごとにトリミング範囲を調整しています。
 (なお、今まで使っていたのは遙か昔に作ったBMPファイルの拡張子を"ico"にしただけ…。)


 ライブタイルについては、最初はWindows 8のスタート画面にピン留めしたときに高解像度のアイコンを使う方法を調べていたのですが、マイクロソフトが、プッシュ通知とかも簡単にできるWEBサービスを用意してくれていたのを知りました。
 なのでこれをそのまま使ってみました。


 ①でタイルに使う画像をアップロードしたり背景色を指定。
 タイルで使う画像サイズは4種類。


  • 128×128 (tiny)
  • 270×270 (square)
  • 270×558 (wide)
  • 558×558 (large)

 意外と大きいですね。
 使おうとしていた画像が558pxより小さかったので、今回は適当にやり方だけ確認し、あとでちゃんとした画像を準備して差し替えるつもりです。

 ②で通知に使うRSSフィードを入力して③へ進むとMETAタグが表示されます。
 これをWEBサイトのHTMLの内に記述。
 ちなみに、このサイトだと下記のようになりました。

<meta name="application-name" content="URAMIRAIKAN"/> <meta name="msapplication-TileColor" content="#4682B4"/> <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="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=https://www.uramiraikan.net/rss2.xml&amp;id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=https://www.uramiraikan.net/rss2.xml&amp;id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=https://www.uramiraikan.net/rss2.xml&amp;id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=https://www.uramiraikan.net/rss2.xml&amp;id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=https://www.uramiraikan.net/rss2.xml&amp;id=5; cycle=1"/>

 最後にパッケージをダウンロードして、中に入っている各サイズのPNGファイルとかをWEBサイトのルート直下に置くだけです。
 Windows 8からWEBサイトをピン留めすると、ちゃんと画像が表示されて更新情報も通知されました。



 あとは、ちゃんとした画像を準備するだけです。
 絵心はないので、写真を撮るかフリー素材を拾ってくるしか…