ファビコンジェネレーター

ロゴや正方形に近い画像を1枚放り込むと、サイトに必要な6サイズを自動で描き出します。ブラウザタブ用の16・32・48ピクセル、iOSがホーム画面に保存するアイコン用の180ピクセル、そしてAndroid用の192・512ピクセルです。ダウンロードされるのは1つのZIPファイルで、中にはこれらのPNG、favicon.ico、site.webmanifest、<head>に貼るHTMLのコピーが入っています。

ZIPの中身は?

PNGが6枚（favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png、icon-192.png、icon-512.png）に加え、16・32・48ピクセル版を1ファイルにまとめたfavicon.icoが入っています。ICO形式はWindows Vista以降、内部にPNG圧縮の画像を持てるようになったので、ファイルサイズを抑えつつ、/favicon.icoしか見に行かない古いブラウザにもきちんとアイコンを表示できます。

site.webmanifestは192・512ピクセルのアイコンを指定し、設定メニューで入力したアプリ名と、それを12文字に切り詰めたshort_nameを持ちます。この文字数は、Androidがホーム画面のアイコン下に表示できる目安の長さです。名前を空欄にすると“My site”になります。最後のfavicon.htmlは、コピーボタンでクリップボードに送られるのと同じ5つの<link>タグです。

画像はどこかにアップロードされますか?

されません。画像はページ内のcanvas要素に描画され、ブラウザ自身がPNGにエンコードし、同じタブの中でZIPにまとめられます。サーバーには何も送られないので、未公開のロゴやクライアントのブランドマークが手元の端末から出ていくことはありません。このページを開いたままネットワークケーブルを抜いても、そのまま動作します。

どんな画像を用意すればいい?

対応形式はPNG、JPEG、WebP、SVGです。画像は縮小・中央寄せされるので、正方形に近い元画像がいちばんきれいに仕上がります。横長のバナーを使うと、上下に透明な帯ができます。ロゴの入力にはSVGが向いていて、各サイズがビットマップの拡大縮小ではなくベクターから描き直されます。何を使うにせよ、16ピクセルはかなり小さいサイズです。フルのロゴタイプはこの大きさだと潰れてしまうので、一文字やシンボルだけのほうがずっと見やすくなります。

ファイルを設置したあとも、ブラウザはファビコンを長く保持するので、新しいアイコンが表示されるまでスーパーリロードが必要になることがあります。スニペット内の各タグの意味はMDNのlink typesのページにまとまっています。