SVG → ICO

SVG とは？

SVG（Scalable Vector Graphics）は、W3C が 2001 年に標準化した XML ベースのベクター画像フォーマットです。JPG、PNG、WebP などのラスター形式とは異なり、SVG ファイルはピクセルのグリッドではなく数学的な記述として図形、パス、テキスト、グラデーションを保存します。つまり小さなアイコンから巨大な看板まであらゆるサイズに拡大しても、鮮度を失うこともピクセル化することもありません。SVG は人間が読めるテキストでもあり、検索可能で、CSS でスタイル設定、JavaScript でアニメーション化でき、シンプルなロゴやアイコンでは非常にコンパクトです。

ベクターベースであるため、SVG はあらゆる解像度で鮮明さを保つ必要があるロゴ、アイコン、ブランドグラフィックの理想的なソース形式です。しかし .ico favicon はラスターコンテナであるため、.ico ファイルにラップされる前に SVG を正方形のキャンバスにラスタライズする必要があります。本ツールは選択したサイズでそのラスタライズを自動的に行います。

ICO とは？

ICO はマイクロソフトが 1985 年に Windows 1.0 向けに導入した歴史あるアイコンコンテナ形式です。.ico ファイルは単一の画像フォーマットではなく、1 つ以上のビットマップや PNG 圧縮画像を異なるサイズ（通常 16×16、32×32、48×48、64×64、128×128、256×256）と色深度で保持できる小さなコンテナです。ブラウザ、Windows シェル、ブックマークマネージャ、デスクトップショートカットはすべて、タブ、履歴リスト、アドレスバー、デスクトップにサイトのアイコンを表示するため、サイトのルートで .ico ファイル（一般に favicon.ico）を探します。

モダンブラウザでは <link rel="icon"> タグで PNG、SVG、WebP の favicon も使用できますが、.ico 形式は依然として最も広く認識される favicon コンテナです。古いブラウザや多くのサードパーティツール（ブックマークマネージャ、RSS リーダー、デスクトップリンク生成ツール）は今でも /favicon.ico をデフォルトでリクエストするため、その URL に実際の .ico ファイルを配置するのが、すべての訪問者にアイコンを確実に表示させる最も安全な方法です。本ツールは選択したサイズの PNG 圧縮画像を含む単一サイズの .ico ファイルを生成します。

SVG と ICO の比較

SVG と ICO は根本的に異なる目的に奉仕します。SVG は形状を数学として保存するベクター形式で、ICO はアイコンと favicon 専用に設計されたラスターコンテナです。下表は SVG と ICO フォーマットの主な違いをまとめたものです。

項目	SVG	ICO
画像種別	ベクター（数学ベース）	ラスターコンテナ（ピクセル）
登場年	2001	1985
スケーリング	無限に拡大可能、品質劣化なし	画像ごとに固定解像度
典型的な用途	ロゴ、アイコン、イラスト	favicon、アプリアイコン、ショートカット
透過	対応（本来）	対応（埋め込み PNG 経由）
アニメーション	対応（SMIL/CSS/JS）	非対応（静的コンテナ）
1 ファイル複数サイズ	非対応（単一ベクター）	対応
ブラウザ対応	すべてのモダンブラウザ	すべてのブラウザ（レガシー favicon 形式）
デフォルトのリクエスト URL	—	/favicon.ico

要するに、SVG はスケーラビリティ、編集性、シンプルなグラフィックのサイズで勝り、ICO はレガシー favicon 互換性で勝ります。SVG ロゴを .ico ファイルに変換することで、ベクターグラフィックが固定解像度のピクセル画像にラスタライズされ、/favicon.ico を探すレガシーツールを含むすべてのブラウザ、ブックマークツール、デスクトップショートカットジェネレータに認識されます。

SVG を ICO に変換するケース

SVG は優れたフォーマットですが、.ico favicon にラスタライズする方が適切な実務場面は数多くあります。プラットフォーム、サービス、ワークフローがベクターグラフィックではなく実際の .ico ファイルを期待する場合、SVG を ICO に変換することで SVG の設計品質と ICO の幅広い互換性の両方が得られます：

• 新規サイト公開。サイトルートに実際の favicon.ico を配置することで、<link rel="icon"> タグを無視する古いブラウザを含むすべてのブラウザでタブにアイコンが表示されます。
• レガシーツールの互換性。ブックマークマネージャ、RSS リーダー、デスクトップリンク生成ツールは今でも /favicon.ico を直接リクエストします。SVG ではそのリクエストに応えられませんが、.ico ファイルなら可能です。
• デスクトップショートカット。ユーザーが URL をデスクトップにドラッグすると、Windows や多くの Linux ファイルマネージャは favicon.ico からアイコンを取得するため、鮮明なショートカットには実際の .ico ファイルが必要です。
• PWA（プログレッシブ Web アプリ）。PWA の manifest.json では、レガシーなインストールコンテキストや古い Android・Windows シェル統合向けに .ico ファイルを参照できます。
• Windows アプリケーションアイコン。多くの Windows 開発ツールは、コンパイル済み実行ファイルにアプリアイコンを割り当てる際、今でも .ico ファイルを要求します。
• ブランドの一貫性。Web、デスクトップ、ブックマークチャネル全体で単一の .ico ファイルを配布することで、マスターが SVG であってもアイコンがどこでも同一に保たれます。

ソース SVG は編集可能なマスターとして保管してください——任意の解像度で再エクスポートできます。.ico エクスポートは ICO が期待されるデプロイメントシナリオでのみ使用してください。

SVG を ICO に変換する方法

このツールで SVG ベクター画像を .ico favicon に変換するのは数秒で完了し、すべてブラウザ内で行われます。アップロード不要、登録不要、インストール不要です。ツールは data URL 経由で SVG を読み込み（外部参照をインライン化）、選択したサイズの正方形キャンバスにラスタライズし（アスペクト比を維持し白背景の中央に配置）、その後 Canvas API でキャンバスを .ico コンテナに再エンコードします。次の4ステップに従ってください：

1. SVG ファイルをアップロード。アップロードエリアをクリックするか、コンピュータから .svg ファイルをドラッグ＆ドロップします。SVG は data URL として読み込まれプレビュー表示されます。
2. ICO サイズを選択。16、32、48、64、128、256 px のいずれかを選びます。32×32 が標準 favicon サイズ、16×16 はクラシックなタブアイコン、48×48 以上は高 DPI ディスプレイとデスクトップショートカットに使用されます。
3. ICO に変換。「ICO に変換」ボタンをクリックします。ツールは SVG を選択したサイズの正方形キャンバスにラスタライズし、PNG バイトを単一画像の .ico コンテナにラップして、元のファイルサイズと変換後のサイズを並べて表示します。
4. ICO をダウンロード。「ICO をダウンロード」をクリックして favicon.ico を端末に保存します。サイトのルートにアップロードするか、プロジェクトのアセットフォルダに配置してください。

すべてのステップは JavaScript でブラウザ内ローカルに実行されるため、SVG 画像がサーバーにアップロードされることはありません。これにより変換は完全にプライベートかつ高速で、機密性の高いブランドアセットにも適しています。