SVGからFaviconジェネレーター

SVGロゴを1つアップロードするだけで、現代的なサイトに必要なものが全部そろいます：正しいマルチ解像度のfavicon.ico、ブラウザやスマートフォンが実際に要求する各サイズのPNGアイコン、そして<head>に貼り付けるだけのHTML <link>タグ。すべてブラウザ内でレンダリングされ、SVGが端末の外に出ることはありません。

このツールとは？

favicon.icoは単なる小さな画像ではありません。1つのファイルに同じアイコンの複数サイズを収められるコンテナ形式で、ブラウザやタスクバー、ブックマークバーが表示する場所に応じて最も鮮明に見える解像度を選べるようになっています。PNGを単にfavicon.icoに名前変更しても、これは実現できません — 中身は拡張子が違うだけの1枚のPNG画像のままで、多くのブラウザは大目に見てくれますが、生のバイトを読む多くのツールやクローラー、古いブラウザは本物のICOコンテナ構造を期待しており、そうでなければエラーになったり空白のアイコンになったりします。

このツールは実際のICOコンテナを構築します。SVGを16×16、32×32、48×48でレンダリングし、それぞれを内部でPNGとしてエンコードしたうえで、Windows Vista以降すべてのブラウザ・OSがサポートしている「ICO内蔵PNG」形式を使い、3つを1つの有効なfavicon.icoにまとめます。それに加えて、180×180（ユーザーがサイトをホーム画面に追加する際にiOSが使うサイズ）と192×192／512×512（AndroidやPWAのインストールプロンプトがWebアプリマニフェストから取得するサイズ）のPNGファイルも個別に生成します。

なぜこれを使うのか？

名前を変えただけのPNGではなく、本当に有効なマルチ解像度favicon.icoを生成。
実際のデプロイに必要な全アイコンサイズを一度でカバー：16、32、180、192、512px。
貼り付けるだけの<head>用HTML — rel/sizes/type属性を推測する必要なし。
正方形でないSVGは引き伸ばされず、透明な正方形の中央に配置。
すべてブラウザ内でローカルにレンダリング。SVGがアップロードされることはありません。

使い方

枠をクリックするか、SVGロゴファイルをドラッグ＆ドロップしてください。
ツールが自動的に全faviconサイズをレンダリングします — 設定は不要です。
サイトのルート用のfavicon.icoと、個別のPNGアイコンをダウンロードしてください。
HTMLコードをコピーし、ページの<head>に貼り付けてください。

例

入力

logo.svg — 企業ロゴ、3KBのベクターファイル

出力

favicon.ico（16/32/48pxを結合）に加え、favicon-16.png、favicon-32.png、apple-touch-icon.png（180px）、icon-192.png、icon-512.png

SVGを1つ入れると、実際のデプロイに必要なアイコンファイルがすべて出てきます。

どのアイコンサイズがどこで使われるか

ファイル	サイズ	用途
favicon.ico	16/32/48px（結合）	ブラウザタブ、ブックマークバー、タスクバー
favicon-16.png / favicon-32.png	16×16 / 32×32	PNGファビコンを優先するブラウザ向けの代替
apple-touch-icon.png	180×180	サイトをホーム画面に追加した際のiOSアイコン
icon-192.png	192×192	Androidのホーム画面アイコン、Webアプリマニフェスト
icon-512.png	512×512	PWAインストールプロンプト、Androidのスプラッシュ画面アイコン

SVGを元にすることが重要な理由

SVGはピクセルではなく数式として図形を保存するため、16pxと512pxのどちらでレンダリングしても、まったく同じパスデータから毎回計算し直されます。大きいサイズ側で拡大による劣化が出ることも、小さいサイズ側でピクセル整列の妥協を強いられることもありません。手元にPNGロゴしかない場合、このツールでは対応できません — 小さいPNGを512pxまで拡大してもぼやけた結果にしかならないため、先にロゴをSVGとして変換または作り直してください。

→ SVGコンバーター

よくある質問

PNGをfavicon.icoに名前変更するだけではだめですか？

.icoファイルには独自のバイナリコンテナ形式があります（含まれる画像数を示すICONDIRヘッダーの後に、画像ごとのディレクトリエントリが続きます）。PNGを.icoに名前変更しても、中身は拡張子が違うだけのPNGのままです。多くの現代的なブラウザは寛容でそれでも表示してくれますが、このツールは3つの実際の解像度を収めた本物のICOコンテナを構築します。これがこの形式が本来設計された用途であり、より厳格な読み取り側が期待する形です。

すでにfavicon.icoがあるのに、なぜPNGアイコンも必要なのですか？

favicon.icoは従来のブラウザタブ・ブックマークの用途しかカバーしません。180×180のPNGは、ユーザーがサイトをホーム画面に追加する際にiOSが使うアイコン（apple-touch-icon）で、192×192／512×512のPNGはAndroidやPWAのインストールプロンプトがWebアプリマニフェストから取得するサイズです。これらがないと、スマートフォンのホーム画面上のアイコンは汎用のスクリーンショットや空白の四角形になってしまいます。

ロゴが正方形ではない場合、どう処理されますか？

各目標サイズで透明な正方形の中央に配置され、引き伸ばされることはありません。そのため横長や縦長のロゴも正しい比率を保ち、正方形に押し込まれて歪むことはありません。

ダウンロードしたファイルはどこに置けばいいですか？

favicon.ico、apple-touch-icon.png、icon-192.png、icon-512.pngをサイトのルートフォルダ（index.htmlと同じ場所）に置き、生成された<link>タグをページの<head>に貼り付けてください。

私のSVGはどこかにアップロードされますか？

いいえ。SVGはローカルの<canvas>要素上でレンダリングされ、ICO/PNGファイルもブラウザ内で組み立てられます。サーバーに送信されるデータは一切ありません。