サイト向けの完全なファビコンセットを作る
このツールが生成するもの
ファビコンは 1 つのファイルで済むことはほとんどありません。ブラウザ、スマートフォン、インストール済みの Web アプリはそれぞれ異なる解像度を要求するため、サイトには 1 枚の画像ではなく小さなアイコンの一式が必要になります。このツールは、アップロードした画像、1〜2 文字のテキスト、または絵文字という 1 つの元データから、モダンなサイトが求めるすべてのサイズのアイコンを作り出します。
仕上がったアイコンは PNG ファイルとして返され、site.webmanifest と、それらをページに組み込む HTML スニペットが添えられます。どのタグがどのファイルを指すのか迷う余地はありません。
3 つの出発点
PNG、JPG、SVG、WebP の画像をアップロードすれば、各アイコンサイズへ縮小されます。テキストマークなら、1〜2 文字を入力してフォントと文字色を選ぶだけ。ロゴがまだ用意できていないときに便利です。絵文字の場合は、用意された一覧から選ぶか、システムが表示できる任意の絵文字を貼り付けられます。
どの元データを選んでも、同じスタイル設定が使えます。背景色、border-radius スライダーによる角丸、そしてアイコンを塗りつぶしのタイルに乗せたくないときの透過背景の切り替えです。ブランドカラーがまだ決まっていない段階なら、CSSグラデーションジェネレーターで配色を試し、そこから 1 色を背景に取り込むのが手早い方法です。アイコンを書き出したあとは、それらを宣言する head のマークアップが、メタタグジェネレーターの出力するタグと並ぶことになります。
具体例
たとえば文字 A を入力し、背景を青にして、border-radius を上げて角を丸めるとします。プレビューはすべてのサイズが同時に更新され、ダウンロードでは、ブラウザのタブや Windows タイル向けの favicon-16x16.png・favicon-32x32.png・favicon-48x48.png、iOS のホーム画面向けに 180×180 の apple-touch-icon.png、Android と PWA インストール向けの android-chrome-192x192.png と android-chrome-512x512.png が、すべて 1 つの ZIP にまとまって手に入ります。
サイズ・形式・link タグ
各サイズには役割があります。16×16 と 32×32 はブラウザのタブ、48×48 は Windows、180×180 は Apple のタッチアイコン、192×192 と 512×512 は Android と Web アプリのマニフェスト向けです。生成されるスニペットは、<link rel="icon">、<link rel="apple-touch-icon">、<link rel="manifest"> の各タグと theme-color の meta でこれらを宣言し、そのまま <head> に貼り付けられます。
出力は旧来の複数解像度 .ico ではなく PNG で、現在のブラウザはこれら link タグを通じて PNG ファビコンを受け付けます。角丸のアイコンをタブ列になじませたい場合は、透過背景を有効にすると、色の付いた四角形の代わりに角が透明のまま保たれます。