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

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

その数、何と21個！

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

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

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

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

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

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

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

そこで、faviconを一括生成してくれるWebサービスを調べてみたところ、「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サービス一択になりました。