オンラインFaviconコンバーター：実践ガイド

ロゴやスクリーンショット、SVGマークがあるとします。それをオンラインのfaviconコンバーターにドロップすると、アイコンが詰まったZIPが手に入ります。そしてデプロイすると、ブラウザタブにはまだ空白の四角が表示される。変換は成功したのに、実装がうまくいっていないのです。

このガイドでは、コンバーターが実際に何をするのか、アイコンスタックを壊さずに使う方法、そしてよくある失敗ポイントがどこに潜んでいるのかを解説します。

オンラインfaviconコンバーターが実際に生成するもの

優れたコンバーターは単なるリサイザーではありません。1つのソース画像から、ブラウザやOSが期待するアイコンスロットに合ったファイル群を出力します。

典型的な出力は次のとおりです。

favicon.ico — マルチ解像度コンテナで、通常は16×16、32×32、48×48を含みます。WHATWG HTML仕様ではrel='icon'リンクタイプがhtml.spec.whatwg.orgで定義されており、レガシーブラウザは今でも慣例的に/favicon.icoをリクエストします。
PNGバリアント — 16×16、32×32、96×96、180×180、192×192、512×512。各サイズは異なる表示面に対応します：タブバー、ブックマークバー、iOSホーム画面、Androidホーム画面。
Apple Touch Icon — 不透明な背景を持つ180×180のPNG。iOSはこれを角丸正方形に合成するため、透明部分は黒または白になります。
site.webmanifest — AndroidやPWAのインストール時に正しいPNGを指すJSON。
HTMLスニペット — <head>に貼り付ける<link>タグ。

コンバーターが単一のICOしか提供しないなら、それは仕事を果たしていません。残りは自分で手作業で編集することになります。

はじめに：適切なソースファイルを選ぶ

ソース画像はコンバーターよりも重要です。白背景の200×200 JPGは、ぼやけて枠に収まったアイコンを生成します。透明背景の1024×1024 PNGなら、コンバーターがきれいにダウンサンプリングできます。

ベクターソースの場合、コンバーターが対応していればSVGが最適な入力です。SVGは補間アーティファクトなしで任意の出力サイズに拡大縮小できます。ラスターロゴしかない場合は、アップロード前にできるだけ大きくクリーンなバージョンを書き出してください。

ソースに関する3つのルール：

正方形のキャンバス。 ロゴを1:1のアスペクト比にパディングします。正方形でない入力は引き伸ばされたりレターボックス化されたりします。
透明な背景。 特に単色タイルを望まない限り、背景を削除します。フラットなJPGから始める場合はfaviconの透明背景を作成する方法を参照してください。
シンプルなマーク。 フルワードマークは16×16では読めません。まずシンボルやモノグラムを抽出します。

ソースがクリーンであれば、変換ステップは簡単な部分です。

注目すべき主要機能

すべてのオンラインコンバーターが同じように作られているわけではありません。違いはZIPをダウンロードした後に現れます。

マルチサイズICO出力

ICO形式は単一画像ではなくコンテナです。適切なコンバーターは16、32、48ピクセルのフレームを1つのファイルに詰め込み、Windowsタスクバー、ブラウザタブ、ブックマークバーがそれぞれ正しい解像度を選べるようにします。単一フレームのICOはブラウザにダウンスケールを強制し、エッジがぼやけます。

マニフェストとHTMLの生成

コンバーターは貼り付け可能な<head>ブロックとsite.webmanifestを出力すべきです。これらを手書きすると、ほとんどの開発者がタイプミスを混入させます。rel='icon'の仕様は短いですが、周辺のタグ（Apple Touch、maskable、theme-color）は間違えやすいです。

ダークモード対応

一部のコンバーターはprefers-color-schemeメディアクエリを含むSVGを出力し、ブラウザがダークモードのときにアイコンが反転します。これはオプションですが、マークが明るい背景に暗い色の場合に便利です。これがないと、黒いアイコンは暗いタブバーに溶け込んで見えなくなります。

機密ロゴのサーバー往復なし

未公開のブランドマークを変換する場合、ツールが画像をクライアント側で処理するかアップロードするかを確認してください。クライアント側変換ならソースは自分のマシンに留まります。

クリーンなアイコンスタックのためのプロのヒント

コンバーターがファイルを出力した後、いくつかの小さな習慣でほとんどのfaviconバグを防げます。

ICOをサイトルートに置く。 ブラウザは別のアイコンを宣言していても/favicon.icoをリクエストします。そこで404を返すとコンソールにノイズが増えます。
リンクタグの順序を意図的に決める。 ブラウザは場合によって最後に一致するアイコンを選んだり、最初のものを選んだりします。SVGを最初に、次にPNGフォールバック、最後にICOを置きます。正確なスタッキングルールはfaviconリンクタグの順序を参照してください。
更新時にキャッシュを無効化する。 ファイルを変更したら、アイコンURLにバージョンクエリ文字列を追加します。ブラウザはfaviconを積極的にキャッシュします。
プレビューだけでなく実際のタブでテストする。 コンバーターのプレビューは画像を表示するだけで、ブラウザのレンダリングではありません。デプロイしたページをChrome、Firefox、Safariで開きます。
マニフェストのパスを確認する。 相対パスで参照されたsite.webmanifestは、ページがサブディレクトリから配信されると壊れます。

以下はコンバーターが出力すべき最小限の<head>ブロックで、バージョン付きファイル名に調整したものです。

<link rel='icon' type='image/svg+xml' href='/favicon.svg?v=3'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png?v=3'>
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16.png?v=3'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png?v=3'>
<link rel='manifest' href='/site.webmanifest'>

コンバーターがこれに近いものを出力するなら、良い状態です。1行しか出力しないなら、自分でギャップを埋める必要があります。

コンバーターが適切でないツールとなる場合

オンラインコンバーターは一度きりのアイコンセットには適切な選択です。しかし、デプロイのたびにアイコンを自動再生成する必要がある場合や、ソースが頻繁に変更されるライブデザイントークンである場合は適切ではありません。

そのような場合は、ビルドステップツールや同じ変換をローカルで実行するスクリプトの方が信頼性が高いです。出力は同じですが、違いは再現性です。

ただし一度きりのプロジェクトなら、オンラインfaviconコンバーターは退屈な部分——リサイズ、ICOコンテナのパッキング、マニフェストの記述——を取り除き、人間が実際に必要とする部分——16ピクセルで読めるマークを選ぶこと——を残してくれます。