SVGをICOに変換
ファビコンの元データとして最適なのがSVGです。大きなビットマップを縮小するのではなく、アイコンの各サイズをベクターから新たに描画するため、16 px版でもピクセルグリッドが許す限りくっきり仕上がります。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
SVGロゴをアップロード
ロゴ全体の文字ではなく、シンボルマークやモノグラムを使ってください。viewBoxが正方形だと、最もきれいに仕上がります。
- 2
すべてのアイコンサイズを残す
アイコンサイズは「すべてのサイズ（16–256）」が初期設定で、すべての解像度を1つの.icoにまとめます。プログラムが1サイズだけを求める場合に限り、単一のサイズを選んでください。
- 3
「ICOに変換」を押す
ファイルをfavicon.icoとして、サイトのルートフォルダに保存するか、Windowsのショートカットのアイコンに指定します。
ファビコン用にSVGをICOに変換するには？
SVGをアップロードし、アイコンサイズを「すべてのサイズ（16–256）」のままにしてICOに変換を押します。ベクターから描画した全解像度を含み、透明も保たれた.icoが1つ得られます。
SVGをICOに変換：ベクターが元データに適している理由
.icoはWindowsの初期のバージョンに由来する形式です。favicon.icoという慣習は1999年のInternet Explorer 5に始まり、ブックマークしたサイトのルートにその名前のファイルを探しに行きました。ICOは小さなコンテナで、エントリの一覧と、それぞれ独立した正方形のビットマップで構成されます。そのため、16 pxのタブ用アイコンと256 pxのデスクトップ用アイコンを1つのファイルに収められます。Windows Vistaで最大サイズが256 × 256に引き上げられ、大きなエントリをPNGとして格納できるようになりました。
各エントリは独立したビットマップなので、アイコンの品質は各サイズの作り方で決まります。PNGからでは、どのサイズも同じピクセルを縮小したものです。SVGからなら、どのサイズもパスを新たに描画し、そのグリッドに合わせてアンチエイリアスを計算します。ロゴに使えるピクセルが256個しかない16 × 16 pxでは、この差がはっきり見えます。
16 × 16 px
16 × 16
ブラウザのタブ、ブックマーク、履歴リスト。
32 × 32 px
32 × 32
高密度ディスプレイのタブ、Windowsのタスクバーのショートカット。
64 × 64 px
64 × 64
拡大表示のデスクトップ、ピン留めした項目。
128 × 128 px
128 × 128
ファイルマネージャーの大きなプレビュー。
256 × 256 px
256 × 256
ICOの最大エントリ。エクスプローラーの特大アイコン。
SVG
Scalable Vector Graphics(SVG)
SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。
- 圧縮方式
- –
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2001 · W3C
ICO
Windowsアイコン
ICOは、Windowsのプログラムアイコンやウェブサイトのファビコンに使われるMicrosoftのアイコン形式です。1つの.icoファイルに16×16、32×32、48×48、256×256ピクセルなど複数サイズの画像を含められ、システムが最適なものを選びます。各画像はビットマップまたはPNGデータで保存でき、完全なアルファ透過に対応します。写真や大きなイラスト向けではありません。ブラウザ、Windows、ほとんどのアイコンエディタで読み込めます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 非対応
- 登場時期
- Microsoft
ロゴはベクターで持っていても、Webサイトのルート、Windowsのショートカット、デスクトップアプリでは、複数のビットマップサイズを含む.icoファイルが今も必要とされるため、SVGをICOに変換する人が多くいます。
SVGをICOに変換する前の準備
| 推奨 | 非推奨 |
|---|---|
viewBoxを0 0 512 512のような正方形にします。 | 32 px未満で消えてしまう極細の線に頼らないでください。 |
| マークがアイコンの端に触れないよう、少し余白を残します。 | 細い染みのようになる横長のロゴタイプをそのまま使わないでください。 |
| フォントが変わらないよう、文字をアウトライン化します。 | SVG内で外部画像やWebフォントを参照しないでください。 |
| 名前全体ではなく、シンボルやイニシャルを使います。 | 暗いタブでも白を表示したい場合を除き、ロゴの後ろに白い長方形を入れないでください。 |
コンバーターはSVGに記述された内容だけを描画するため、リンク先の素材や埋め込まれていないフォントは取得できません。Figma、Illustrator、Inkscapeなどのデザインツールは、文字をパスとして書き出せます。そうしておけば、どこでも文字がブランドどおりに表示されます。
.icoができたら、Appleタッチアイコン用に180 pxのPNGを、ベクターのファビコンに対応するブラウザ用にSVGそのものを追加してください。PNGはSVGをPNGに変換で任意のサイズに作成できます。元がビットマップのロゴなら、PNGをICOに変換でピクセルから同じ作業ができます。
SVGをICOに変換：よくある質問
PNGではなくSVGからICOに変換するのはなぜですか？
PNGは各アイコンサイズに合わせて縮小する必要があり、縮小するとエッジがぼやけます。SVGなら16、32、64、128、256 pxで直接描画されるため、各サイズがそれぞれのピクセルグリッドに合ったくっきりしたエッジになります。
サイトにSVGアイコンがあっても、favicon.icoは必要ですか？
ChromeやFirefoxは、linkタグで指定したSVGのファビコンを読み込みます。ただ、多くのブラウザ、フィードリーダー、クローラーは今もサイトのルートにある/favicon.icoを既定で要求します。両方を用意しておけば、すべてに対応できます。
SVGが正方形でない場合はどうなりますか？
アイコンの枠は正方形のため、横長のロゴは余白だらけになるか、小さく表示されます。先にviewBoxの幅と高さを同じ値に編集するか、PNGを書き出してから画像トリミングツールで正方形に切り抜いてください。
ICOに変換しても透明背景は保持されますか？
はい。ICOはアルファチャンネルを保持するため、SVGで塗りのない部分は透明のままになり、明るい色と暗い色のどちらのブラウザタブでもきれいに表示されます。
WindowsのプログラムやフォルダのアイコンとしてSVGをICOに変換できますか？
はい、同じファイルが使えます。Windowsでは、エクスプローラーの大・特大アイコン表示で256 pxの画像を、リスト表示やタスクバーでは小さいサイズのエントリを使います。
16 pxだとアイコンが空っぽに見えるのはなぜですか？
細い線や小さな文字は、そのサイズでは消えてしまいます。512ユニットのアートボードにある2ユニットの線は、16 pxのアイコンでは1ピクセルよりずっと細くなります。ファビコンには、線を太くするか、より単純なマークを使ってください。
その他のアイコン変換
- PNGをICOに変換PNGをICOにオンラインで変換。16〜256 pxの全サイズを1つの.icoファイルに収め、透明部分もそのまま保持します。ファビコンやWindowsのショートカットに。無料・登録不要。
- JPGをICOに変換JPG・JPEGを16、32、64、128、256 pxのサイズを含む.icoファイルに変換。WebサイトのファビコンやWindowsのショートカットに使えます。登録不要です。
- ICOをPNGに変換.icoファイルを透過背景のままPNGに変換。アイコン内の最大サイズの画像を取り出すので、ファビコンやWindowsアイコンもくっきり仕上がります。
- SVGをPNGに変換SVGのロゴやアイコンを、指定した幅（初期値1024 px）でPNGに変換します。透過背景もそのまま保持。DPIとピクセルの関係も解説します。
- PNGをICO(256x256)に変換PNGから256 × 256のICOを作成。Windowsの特大アイコン、インストーラー、Electronビルドに。透過を保持、1ファイル1サイズ、登録不要。
- 画像をICOに変換画像をマルチサイズの.icoに変換し、ファビコンやWindowsのショートカットに使えます。PNG・JPG・SVG・WebP・HEICなどに対応。16〜256 pxを1ファイルに。