SVGをアイコンに変換
ベクターのロゴが1つあれば、ファビコン、Windowsのショートカット、Macのアプリ、スマートフォンのホーム画面アイコンまで、必要なアイコンをすべて用意できます。このページの初期設定はマルチサイズICOで、ほかのプラットフォーム向けにICNSやPNGへ切り替えられます。
画像変換
または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をアップロード
ロゴなどのSVGを追加します。viewBoxが正方形のものが理想です。ライト用とダーク用など、最大20ファイルまでまとめて追加できます。
- 2
アイコン形式を選ぶ
初期設定は、アイコンサイズがすべてのサイズ(16–256)のICOです。macOS用なら変換先でICNSを、スマートフォンやストア用のアイコンならPNGを選び、出力画像のサイズ変更で幅を指定します。
- 3
変換してファイルを配置
ICOに変換 →を押します(ボタンの表記は選んだ形式に応じて変わります)。ダウンロードしたら、各ファイルをそれぞれのプラットフォームが指定する場所に置いてください。
アイコンの形式は1つではありません。Windowsやブラウザ、はICO、macOSはICNS、スマートフォンはPNGのセットを使います。SVGから変換すれば、どの形式もベクターから描き直されるため、各サイズで鮮明に仕上がります。
SVGをアイコンに変換：1つのベクターから3種類のアイコンファイル
アイコンファイルは、小さなビットマップを集めたコンテナであり、ベクターではありません。OSは必要なサイズに最も近いビットマップを選ぶため、良いアイコンには複数のサイズが入っていて、それぞれが専用のグリッドで描画されています。
このページのICOプリセットは、16〜256 pxのすべてのサイズを1つのファイルにまとめて出力します。favicon.icoやWindowsのショートカットに使えます。変換先をICNSに切り替えるとApple用のアイコンコンテナになり、PNGに切り替えるとAndroidやiOS、アプリストアが求める単一サイズの画像になります。
下の表は、主要なプラットフォームが公開しているアイコン枠ごとの要件です。
| 機関 | 要件 | 出典 |
|---|---|---|
| Windowsのデスクトップとタスクバー | 16、32、48、256 pxを含む複数サイズのICO | — |
| Webサイトのファビコン | サイトのルートに16、32、48 pxを含むfavicon.ico。apple-touch-iconには180 × 180 pxのPNG | — |
| macOSアプリのアイコン | ICNSまたはXcodeのアセットカタログ。最大1024 × 1024 px | — |
| Google Playストアの掲載情報 | 512 × 512 pxの32ビットPNG、最大1,024 KB | — |
| Apple App Store | 透過なしの1024 × 1024 px PNG | — |
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
ベクターのロゴが1つあり、複数のプラットフォームに対応したい場合に「SVG アイコン 変換」で検索されます。Webサイトのfavicon.icoからMac用のICNS、アプリストア向けのサイズ別PNGまで、それぞれアイコンの形式が異なるためです。
SVGをWindows・Mac・Android・iOS用アイコンに変換
ICOのまま、アイコンサイズはすべてのサイズにします。出力ファイルの名前をfavicon.icoに変えてWebサイトのルートに置くか、Windowsのショートカットの「アイコンの変更」ダイアログで指定してください。
- 1つの.icoでタブ、ブックマーク、タスクバーに対応できます
- iPhoneのホーム画面ブックマーク用に180 pxのPNGも追加してください
変換先でICNSを選びます。ファイルには256 pxまでのサイズが入ります。アプリバンドルには、Xcode用に512 pxと1024 pxのPNGも書き出してください。
- 余白を持たせた正方形のSVGを使います
- Apple純正のアイコンは角丸の正方形の上に配置されています。その見た目にしたい場合は、SVGに描いてください
PNGを選び、出力画像のサイズ変更で幅を指定します。これをサイズごとに1回ずつ行います。ストア掲載用には、Google Playが512 px、App Storeが1024 pxです。
- Androidのアダプティブアイコンは、108 dpのレイヤーに72 dpのセーフゾーンを設けます
- App Storeのアイコンからは透過を除いてください
16 pxでも潰れないSVGのデザイン
16 × 16 pxのアイコンは、全部で256ピクセルしかありません。多くのブランドは、アイコン専用のマークを別に用意しています。たいていはシンボルや1文字だけで、太い形と少ない色で作られています。まだない場合は、SVGを簡略化したコピーをアイコン用に作ってください。
変換する前にviewBoxを確認してください。横長のviewBoxだと、マークの上下に空白の帯ができたアイコンになるため、先に正方形にトリミングしてください。正方形に切り抜く方法は画像を比率指定でトリミングする方法で解説しています。また、SVGをPNGに変換すれば、大きなプレビューでデザインをすぐに確認できます。
SVGアイコン変換のよくある質問
このページと「SVGをICOに変換」の違いは何ですか？
SVGをICOに変換は、ファビコンやWindows向けの単一の.icoファイルに特化しています。このページでは、macOS用のICNSや、AndroidやiOS、アプリストアが求める固定サイズのPNGなど、アイコンが使われるあらゆる場面に対応します。
OSごとに使われるアイコン形式はどれですか？
WindowsはICO、macOSはICNSまたはXcodeで作成するアセットカタログを使います。AndroidとiOSは、決まったピクセルサイズのPNG画像を使います。
アプリに必要なPNGサイズを1回の変換ですべて作れますか？
いいえ。PNGには1つのサイズしか入らないため、1回の変換で出力される幅は1つです。出力画像のサイズ変更で1つのサイズを指定して変換し、数値を変えてもう一度変換してください。どのサイズもベクターから描き直すので、鮮明に仕上がります。
このページで作るICNSはRetina対応のMacアイコンに使えますか？
16〜256 pxのサイズが入っています。最近のmacOSアプリのアイコンには、Retinaディスプレイ向けに512 pxと1024 pxも含まれます。これらはXcodeやAppleのiconutilがPNGから作成するので、この2つはここでPNGとして書き出し、セットに追加してください。
アイコンの背景は透過のままにすべきですか？
ICO、ICNS、Androidのランチャー用レイヤーでは、透過にしてください。システム側が独自の背景を描画できます。例外はiOSのApp Storeアイコンです。Appleはアルファチャンネルを含む1024 pxのマーケティング用アイコンを受け付けないため、このPNGはSVG側で単色の背景を付けてください。
細かいロゴが小さなアイコンで潰れてしまうのはなぜですか？
16 pxや32 pxでは、細い線や小さな文字を表示する余地がありません。最小サイズでも線が1ピクセル以上になるよう太くし、ロゴタイプは外してください。
その他のアイコン変換ツール
- SVGをICOに変換SVGをICOに変換。16～256 pxの各サイズをベクターから直接描画し、透明背景も保持します。ロゴファイルからfavicon.icoやWindowsアイコンを作成できます。
- PNGをICNSに変換PNGをMacアプリ、スクリプト、DMGボリューム、フォルダ用のApple .icnsアイコンに変換。複数サイズを出力し、透過も保持。Xcodeは不要です。
- SVGをPNGに変換SVGのロゴやアイコンを、指定した幅（初期値1024 px）でPNGに変換します。透過背景もそのまま保持。DPIとピクセルの関係も解説します。
- 画像をICOに変換画像をマルチサイズの.icoに変換し、ファビコンやWindowsのショートカットに使えます。PNG・JPG・SVG・WebP・HEICなどに対応。16〜256 pxを1ファイルに。
- ICNSをPNGに変換macOSの.icnsアイコンをオンラインでPNGに変換。アイコンセット内で最大の画像(最大1024 × 1024 px)を透過を保ったまま保存します。Windowsでも使えます。
- PNGをICOに変換PNGをICOにオンラインで変換。16〜256 pxの全サイズを1つの.icoファイルに収め、透明部分もそのまま保持します。ファビコンやWindowsのショートカットに。無料・登録不要。