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)は用途が異なります。画像を何に使うかによって適した形式が決まります。
| 項目 | SVG | PNG / JPG | ICO / 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 にオンラインで変換する方法
- ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 出力設定(サイズ、DPI、背景、品質、トレースの細かさ)を指定すると、プレビューがその場で更新されます。
- 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー:ファイルはブラウザから出ません
ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。
何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。
よくある質問
ICO にはどのサイズが含まれますか?
最大サイズまでの標準的な ICO のサイズをすべて 1 つのファイルにまとめます。16、32、48、64、128、256 です。多くのブラウザや Windows のツールは、場面に応じて適切なサイズを自動で選びます。
ファビコンにはどのサイズを選べばよいですか?
ブラウザのタブやブックマークには 32 が無難です。標準サイズをすべて含めたい場合は 256 を選んでください。Windows はショートカット、タスクバーのピン留め、デスクトップアイコンに最大のものを使います。
ICO で透過背景を使えますか?
はい。ICO はピクセル単位のアルファに対応しており、既定で SVG の透過を保ちます。透明な部分を塗りつぶしたい場合にだけ、単色の背景色を選んでください。