本文へスキップ

SVG を ICO に

SVG を ICO に変換:無料のマルチサイズファビコン作成

Web サイトのファビコンやデスクトップのショートカット用に Windows の .ico を作成します。標準サイズは 16×16 から 256×256 まであり、最大サイズ以下のものを 1 つのファイルにまとめます。Web 開発者とアイコン制作者のためのツールです。

ここにファイルをドロップ

新規ファイルの既定値を編集しています

ICO のサイズは 16、32、48、64、128、256 に固定されています。最大サイズまでのすべてを書き出し、1 つの .ico にまとめます。

含まれるサイズ:16, 32, 48, 64, 128, 256 px

背景
角丸

プレビュー

プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。

SVG とは

SVG(Scalable Vector Graphics)は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。

SVG は Web における標準のベクター形式です。最新のブラウザはすべて標準で対応し、CSS でスタイルを指定でき、JavaScript や SMIL でアニメーションもできます。同等のラスター画像に比べてファイルサイズも大幅に小さくなります。

ICO とは

ICO は Windows のアイコンコンテナ形式で、ファビコン、アプリケーションアイコン、デスクトップのショートカットに使われます。1 つの ICO ファイルに複数のラスター画像(通常は 16×16 から 256×256)を収められます。

SVG とラスター形式の比較

ベクター画像(SVG)とラスター画像(PNG、JPG)は用途が異なります。画像を何に使うかによって適した形式が決まります。

項目SVGPNG / JPGICO / ICNS
拡大縮小解像度に依存しない拡大するとぼやける固定サイズで事前に描画
ファイルサイズ図形やアイコンは小さい解像度とともに増える各サイズの画像の集合
編集テキストやベクターツールで編集可ピクセル単位の編集のみ各サイズを編集して再度まとめる
アニメーションCSS、SMIL、JavaScript限定的(APNG / GIF)非対応
透過対応PNG は対応、JPG は非対応対応(PNG ベース)

SVG を ICO に変換するのはどんなとき

ブラウザやデスクトップのシェルは ICO ファイルを使います。この SVG ICO 変換ツールは無料のファビコン作成ツールとして使えます。ファビコン(favicon.ico)、Windows のショートカット、.ico が必要な場面では SVG を ICO に変換してください。最大サイズ 64 のマルチサイズ ICO は 5〜25 KB、最大サイズ 256(16、32、48、64、128、256 を収録)で 40〜120 KB が目安です。1 つのファイルで Windows とブラウザが求める標準サイズをすべてまかなえます。

SVG から ICO:ファイルサイズと品質のバランス

ファイルサイズ

マルチサイズの ICO は 16×16 から最大サイズまでの標準サイズをすべてまとめます。最大サイズ 256 では 16、32、48、64、128、256 を収め、合計 40〜120 KB が目安です。最大サイズ 64 なら 4 つのサイズで 5〜25 KB ほどです。各サイズは内部で PNG として保存されるため、絵柄が細かいほど大きくなります。

ICO が適しているとき

ICO は Windows のファビコン(サイト直下の favicon.ico)、Windows のデスクトップショートカット、タスクバーにピン留めしたアプリ、.ico を求められる場面に適した出力です。各サイズは PNG として保存され、Windows は Vista 以降これを読み込めます。ブラウザと macOS はどのサイズでも受け付けます。拒否するのは Vista より前のパーサーだけです。

ICO ではなく SVG のファビコンを使うとき

最新のブラウザは <link rel='icon' type='image/svg+xml' href='/favicon.svg'> を受け付けるので、SVG も残して ICO と併せて配信してください。SVG のファビコン 1 つでタスクバーやタブのあらゆるサイズに対応でき、高 DPI ディスプレイでも鮮明なままです。ICO は Windows のデスクトップショートカットと非常に古いブラウザ向けです。

品質とのバランス

ICO の各サイズはそのピクセルサイズちょうどでラスター化されるため、16×16 のサイズは 16×16 で鮮明です。ただし複雑な SVG を極端に縮小すると細部が失われることがあります。ファビコンでは、16×16 でも読み取れるように元の SVG を設計してください(太い線、少ない要素)。透過はピクセル単位で保たれ、単色を選ばないかぎり背景は透明のままです。

SVG を ICO にオンラインで変換する方法

  1. ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
  2. 出力設定(サイズ、DPI、背景、品質、トレースの細かさ)を指定すると、プレビューがその場で更新されます。
  3. 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。

プライバシー:ファイルはブラウザから出ません

ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。

何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。

よくある質問

ICO にはどのサイズが含まれますか?

最大サイズまでの標準的な ICO のサイズをすべて 1 つのファイルにまとめます。16、32、48、64、128、256 です。多くのブラウザや Windows のツールは、場面に応じて適切なサイズを自動で選びます。

ファビコンにはどのサイズを選べばよいですか?

ブラウザのタブやブックマークには 32 が無難です。標準サイズをすべて含めたい場合は 256 を選んでください。Windows はショートカット、タスクバーのピン留め、デスクトップアイコンに最大のものを使います。

ICO で透過背景を使えますか?

はい。ICO はピクセル単位のアルファに対応しており、既定で SVG の透過を保ちます。透明な部分を塗りつぶしたい場合にだけ、単色の背景色を選んでください。