『ドット絵』が好きです。
今風に言うと『ピクセルアート』になるでしょうか、ドット数・ピクセル数という制約から生まれるミニマルな表現に、俳句にも似た無限の可能性を感じます。
...という理屈以前に、私が長年のゲーマーだからです。

Webの世界で言うと、極小の画像でサイトの看板を表現するfaviconもドット絵の仲間です。
16ピクセル四方という小さな領域にいかに美しく『ドット打ち』するか。

今でこそ高解像度の画像が指定できるようになり、またモニタも高精細になったため、昔よりずっと滑らかに表示できるようになってしまいましたが、今でもfaviconにはサイトのアイデンティティが詰まってますよね。

ところでこのfavicon、作ってアップロードしてみたらどうにもボケて見える...ちゃんと大きなサイズで作ってるのに...という現象を経験したことはありませんか？

私も先日遭遇したのですが、原因はiMacのRetinaディスプレイに対してfaviconのピクセル数が小さかったからでした。
今回は、Retinaディスプレイでも綺麗に見える、最新のマルチサイズfavicon作成方法をご紹介します。

まずはfavicon画像を作る

Photoshopでもなんでもいいので、faviconに使う画像を作ります。
今回作成するfaviconは、表示サイズごとに細かく用意するタイプではなく、大きなサイズで作ったものをマルチアイコンに合成するので、用意する画像はワンサイズで大丈夫です。

必要な最大サイズはデバイスの進化に合わせて年々変わっていきますが、とりあえず大は小を兼ねるで512x512くらいで作っておきましょう。

ポイントは、

• できるだけ単純な図形にする
• 細い線・文字は使わない
• 透過画像にする場合は、ダークモードでの視認性も意識する

といったところです。

完成した画像は、png形式で保存しましょう。

ico形式に変換する

書き出したpng画像は、ico形式に変換する必要があります。
Photoshopのプラグインを導入して直接ico形式に書き出す方法もありますが、今回はオンラインサービスを利用させていただきます。

検索するといろいろなファビコンジェネレーターがヒットすると思いますが、ここでのポイントは
マルチアイコン書き出しに対応したサービスを使う
ことです。
単一サイズのみ書き出すものは、出来上がったfavicon.icoが16x16サイズになっている場合があり、これだとRetinaディスプレイで見た際にボケボケになってしまいます。
一方マルチアイコン書き出しは、一つのicoファイルの中に複数のサイズが内包されているので、自動的に適切な画素数で表示されるのです。

いろいろ試した結果、以下のサイトがシンプルで使いやすかったのでご紹介します。
https://favicon-generator.mintsu-dev.com/

対象の画像をアップロードして、書き出しサイズをチェックします。
通常は、16/32/64/128あたりを押さえていれば大丈夫でしょう。

『画像を変換する』を押して、おかしなところがなければ『ダウンロード』。
これだけで、マルチアイコン作成が完了です。

サイズごとに作り込みたい場合

今回紹介した上記のサイトは自動的にリサイズまで行ってくれるサービスですが、サイズごとにきちんとドットを打ちたいというこだわり派のあなたには、以下のサービスがおすすめです。
https://ao-system.net/alphaicon/
サイズごとに複数の画像を自分でセットできるので、どんな環境で表示してもくっきり見えるfaviconが作れます。

おまけ：バッジ(通知数)付きアイコンを作る

GmailやBacklogといったブラウザ上のサービスで、favicon上にバッジが付いているのを見たことがあると思います。
技術的には、ベースとなる画像と載せるバッジをcanvasで合成し、base64に変換してfaviconに指定する、という方法で実装されているようです。
が、もっと簡単に実装する方法を見つけました。
favico.js (http://lab.ejci.net/favico.js/)
こちらのJSライブラリを読み込めば、4行ほどの記述でfaviconにバッジを載っけられてしまいます。

var favicon = new Favico({
    animation:'slide'
});
favicon.badge(123);

もちろん、通知数を取得して渡すロジックは自前で用意する必要があります。

たかがfavicon、されどfavicon

Google検索結果からfaviconが消え、スマートフォンではapple-touch-iconが使われる昨今、昔ほどfaviconの重要性は高くないかもしれません。
が、Chromeのタブ開きすぎ症候群の人間にとっては、どんなにタブが細くなっても居残るfaviconはまさに最後の砦。
新規作成する機会があれば、ちょっと拘ってみるのもいいと思います。

ちなみに、今回サンプルとして作成したfaviconは、弊社の新サービスTweetVisionのものです。
ウェブ配信番組などで、特定のハッシュタグのツイートを収集してテロップ表示できるサービスです。
現在正式版に向けて鋭意開発中ですが、すでに実際の配信に導入されご好評いただいているので、以後お見知り置きください。
https://tweetvision.tv/