SVGからFaviconを生成

SVGからFavicon：全サイズとfavicon.icoを一括生成

Webサイトでは通常、複数のアイコンが必要です。ブラウザでは16と32、Windowsのショートカットではマルチ解像度のfavicon.ico、iOSのホーム画面では180、PWAマニフェストでは192と512などが使われます。サイズごとに手作業で書き出すのは手間がかかり、サイズが揃わなくなることもあります。このツールなら1つのSVGを使って必要なサイズを一括生成し、.icoと参照コードまで作成できます。すべてブラウザ内で処理され、ファイルはサーバーへアップロードされません。

2種類の入力方法と即時検証

.svgファイルをアップロードするか、テキストボックスにSVGソースコードを直接貼り付けられます。たとえばデザインツールからコピーしたコードも利用できます。入力するとすぐに、SVGコードが有効か、viewBoxを含むか、サイズと1:1の正方形かどうかを確認します。Faviconには1:1のアイコンが推奨されます。正方形でない場合は警告が表示されますが、そのまま処理を続行できます。SVGは画像として読み込んでレンダリングし、ファイル内のスクリプトは実行されません。

サイズ選択

サイズは用途別にグループ化されています。定番サイズは16、32、48、180、192、512で、初期状態ではすべて選択されています。追加サイズとして64、128、256を必要に応じて選択でき、カスタムサイズを入力して追加することもできます。「推奨Webアイコン」「すべて」「クリア」の3つのプリセットボタンも用意されています。各サイズの用途も説明され、16はブラウザタブ、32と48はブラウザやWindowsショートカット、180はiOSホーム画面、192と512はPWAマニフェスト、64と128は一般的なアイコンに使用します。

背景と内側余白

背景は初期状態で透明です。正方形または余白を持つアイコンに適しています。元画像の端が近すぎる場合や暗い背景で使用する場合は、塗りつぶし色と背景色を指定できます。内側余白はパーセンテージで設定し、0、5%、10%、15%、20%などのクイック値を利用できます。これによりアイコンがキャンバスの端に接するのを防ぎます。すべてのサイズで同じ背景と余白設定を使用するため、見た目を統一できます。

生成結果とダウンロード

生成後、結果は用途別に表示されます。上部にはブラウザタブ風のプレビューがあり、16ピクセルの実寸でアイコンを確認できます。Faviconグループには180未満のサイズとfavicon.icoの構成が表示され、Webサイト・PWAグループには180以上のサイズが表示されます。各サイズにはプレビュー、容量、個別ダウンロードボタンがあります。ダウンロード方法は4種類で、個別サイズのダウンロード、すべてのPNGを順番にダウンロード、複数解像度を含むfavicon.icoのダウンロード、すべてのPNGとfavicon.icoをまとめたZIPダウンロードに対応しています。

HTML参照コード

選択したサイズに応じてHTML参照コードとwebmanifestのアイコン部分を自動生成します。favicon.ico、各サイズのPNG、apple-touch-iconの記述を含むため、コピーしてプロジェクトへ貼り付けるだけで利用できます。コード内のパスはサイトルートを基準に構成されます。

よくある質問とエラー処理

生成したicoに512が含まれないのはなぜですか？ ICOコンテナでは256を超えるPNGエントリの互換性が低いため、ツールは256以下のサイズだけをicoに書き込みます。512はPNGとして個別に提供され、icoに実際に含まれるサイズもページに表示されます。
SVG内のフォントが表示されない場合は？ ブラウザが単独のSVGをレンダリングするとき、外部のシステムフォントファイルは読み込まれません。SVG内の文字をパスに変換してください。
サイズを1つも選択しなかった場合は？ 少なくとも1つの出力サイズを選択するよう案内します。
SVGが無効、またはレンダリングに失敗する場合は？ コードが不完全、またはタグが正しくないことが主な原因です。デザインツールからSVGを再出力して試してください。

利用シーンとプライバシー

Webサイトや管理システムのブラウザタブアイコン、モバイルサイトのホーム画面アイコン、PWAマニフェスト用アイコンの設定に適しています。また、ベクターLogoを一式のアイコン素材へ変換する用途にも利用できます。SVGレンダリング、PNGエンコード、ICOパッケージ化はすべてブラウザ内で行われます。ページにはアップロード用インターフェースがなく、ファイルはサーバーへアップロードも保存もされません。