Webサイトに必要なfaviconが21個になっていた

Webサイト製作

久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。

その数、何と21個！

そんなに増えていたとは。

一応、以下にリストアップしてみます。

faviconのリスト

  1. favicon.ico: IE用
  2. favicon-16x16.png: タブ表示用
  3. favicon-32x32.png: Mac版Safari用
  4. favicon-96x96.png: Google TV用
  5. favicon-160x160.png: Opera 12 までのスピード・ダイアル用
  6. favicon-196x196.png: Android版Chrome用
  7. mstile-70x70.png: Windows 8 用
  8. mstile-144x144.png
  9. mstile-150x150.png
  10. mstile-310x310.png
  11. mstile-310x150.png
  12. apple-touch-icon-57x57.png: iOS用
  13. apple-touch-icon-60x60.png
  14. apple-touch-icon-72x72.png
  15. apple-touch-icon-76x76.png
  16. apple-touch-icon-114x114.png
  17. apple-touch-icon-120x120.png
  18. apple-touch-icon-144x144.png
  19. apple-touch-icon-152x152.png
  20. apple-touch-icon.png
  21. apple-touch-icon-precomposed.png

以上で21個。Google TV用やOpera 12用は省略できるかもしれないですが、それでも19個。

あと、これに加えて、IE11用に browserconfig.xml というファイルも用意する必要があります。

結局、ブラウザやデバイスが増えると、それに応じてfaviconも増えていくんですね。

SVGのfaviconに対応してくれるとファイル数を大幅に減らせそうですが、まだ普及しそうにない模様。

faviconを一括生成する

さて、さすがにこれだけの数になると、1つずつ生成するのは面倒です。

そこで、faviconを一括生成してくれるWebサービスを調べてみたところ、「Real Favicon Generator」というサービスがなかなか良さそうです。

Real Favicon Generator

このWebサービスでは、260x260以上のファイルを指定すると、上記の21個のファイルすべてを生成してくれます。（実は、上記のリストも Real Favicon Generator の FAQ のページ を参考にしたものです。）

また、ファイルが生成された後、Webサイトの <head> に入れるコードも表示してくれるので、そのコードを入れると、すぐに使えるようになります。


さらに便利なのは、Webサイトのfaviconをテストしてくれる機能があることです。

トップページ の下の方にある「Check your favicon」という欄にサイトのURLを入れると、そのサイトのfaviconが正しく設置されているかテストして、その結果を表示してくれます。

以前は、faviconを設置した後で、いろいろなブラウザできちんと表示されるかどうか苦労して確認していましたが、この機能を使えば一発でチェックできます。

（ただし、念のために、実際の確認も行った方が良いと思います。）


ここまででも、十分に素晴らしいサービスなのですが、このWebサービスの不具合は GitHubのissues で管理されているところがまた素晴らしい。

つまり、ブラウザの仕様が変わったり、新たなデバイスが出たとしても、それがissuesで指摘され、サポートされると期待できるわけです。（実際、Mac OS X Yosemite版Safari をサポートするための情報もすでに上がっています。）

faviconのような、複数のソフトやデバイスに渡る情報を一人で追いかけるのは結構大変なので、そこに集合知を使うというのは非常にうまいやり方だと思います。

個人的に、今後のfavicon作成はこのWebサービス一択になりました。