細い線のアイコン
256 × 256 px · ICO · 16, 24, 32, 48, 256
24pxの線アイコンをサイズごとに描き直し。24pxと48pxでは、すべての線がピクセルにぴったり揃います。
SVGをICOに変換
SVGをICOに変換し、16pxから256pxまでの各サイズをベクターからシャープに描画します。背景は透過のままでも、色付きの図形でもOK。もう1クリックで、HTML付きのファビコン一式を作成できます。無料で、お使いのデバイス上で処理します。
SVG → ICO無料・ブラウザで動作
·手元にSVGがない場合は
変換はお使いのデバイス上で行われ、ファイルが当社のサーバーにアップロードされることはありません。SVG内のWebフォントやリンク画像は、ファイルを正しく表示するために、ブラウザーがそれぞれのサーバーからダウンロードします。
- 無料・登録不要・ウォーターマークなし
- ファイルはデバイス内で処理
- 全サイズをベクターから描画
- HTML付きファビコン一式
試せるSVGからICOへの変換例6選
このページのために描き下ろしたオリジナルのアイコンです。それぞれカードに記載の設定で、ここでSVGをICOに変換しました。読み込むと同じ設定で試せます。
ダークモード対応ファビコン
256 × 256 px · ICO · 16, 32, 48, 256
ファビコン一式のicon.svgに、SVGのダークモード配色をそのまま保持します。
丸いバッジ
256 × 256 px · ICO · 16, 32, 48, 256
円形の背景に10%の余白。四隅は透過のままです。
グラデーションのロゴマーク
256 × 256 px · ICO · 16, 32, 48, 256
全サイズでマークの周囲は透過のまま。柔らかなエッジも保持します。
Windowsアプリアイコン
256 × 256 px · ICO · 16, 24, 32, 48, 128, 256
紫の角丸タイルに白いシンボル。256pxまでの6サイズ。
ドット絵のハート
256 × 256 px · ICO · 16, 32, 48, 64, 256
16・32・48・64・256px：整数倍なので、すべてのピクセルが正方形のまま保たれます。
細い線のアイコン
256 × 256 px · ICO · 16, 24, 32, 48, 256
24pxの線アイコンをサイズごとに描き直し。24pxと48pxでは、すべての線がピクセルにぴったり揃います。
Windowsアプリアイコン
256 × 256 px · ICO · 16, 24, 32, 48, 128, 256
紫の角丸タイルに白いシンボル。256pxまでの6サイズ。
グラデーションのロゴマーク
256 × 256 px · ICO · 16, 32, 48, 256
全サイズでマークの周囲は透過のまま。柔らかなエッジも保持します。
丸いバッジ
256 × 256 px · ICO · 16, 32, 48, 256
円形の背景に10%の余白。四隅は透過のままです。
ダークモード対応ファビコン
256 × 256 px · ICO · 16, 32, 48, 256
ファビコン一式のicon.svgに、SVGのダークモード配色をそのまま保持します。
ドット絵のハート
256 × 256 px · ICO · 16, 32, 48, 64, 256
16・32・48・64・256px：整数倍なので、すべてのピクセルが正方形のまま保たれます。
SVGファイルからICOまで3ステップ
追加して、選んで、ダウンロードするだけでファビコン作成が完了します。
最大50ファイル（.svgまたは.svgz、各20MBまで）をドロップするか、SVGコードを貼り付けます。
初期設定は16・32・48・256pxです。透過のままにするか、正方形・角丸・円形の図形に色を設定します。
一覧で各サイズを確認してから、ICO、ZIP、またはファビコン一式を保存します。
SVGをICOに変換するこのツールの強み
ファビコン、アプリアイコン、ショートカットに役立つ、この無料変換ツールの6つの強み。
全サイズをシャープに描画
SVGをICOに変換するとき、各サイズをそのサイズでベクターから描画するため、16pxのアイコンはエッジまでくっきりした本物の16px画像になります。16pxや24pxのグリッドで描いた線アイコンに最適で、このヨットは24pxと48pxでピクセルにぴったり揃います。
透過を保持
透明な部分は、柔らかなエッジやグラデーションも含め、全サイズで透明のまま。小さいサイズは32ビットBMP、128pxと256pxはPNGで格納します。Windows自身のアイコンと同じ方式です。この炎のマークも、全サイズでグラデーションと透明な周囲を保っています。
ファビコン一式を1クリックで
favicon.ico、ダークモードを保持したicon.svg、apple-touch-icon、192pxと512pxのアプリアイコン、manifest、さらに<head>に入れるコードまで揃います。このモノグラムのicon.svgは、ダークモードの配色に自動で切り替わります。
背景・形・余白
透過、白、黒、または任意の色を、正方形・角丸タイル・円形で設定でき、余白は5%〜20%です。ほぼ正方形のロゴマークやシンボルはタイルに最もきれいに収まります。この芽のバッジはティール色の円に10%の余白で、四隅は透過です。
保存前に全サイズを表示
各ファイルの小さいサイズを実寸のピクセルで表示するので、サイトに載せる前に16pxのアイコンを確認できます。整数倍で保存したドット絵は、すべてのピクセルが正方形のまま。このハートは16・32・48・64・256pxです。
一括処理・ZIP・プライバシー
最大50個のSVGファイルを一度に変換し、1つのZIPで保存できます。すべてお使いのデバイス上で処理され、何もアップロードされません。このアプリのシンボルは、紫の角丸タイルにのせて256pxまでの6サイズを1つのICOにまとめました。Windowsアプリにそのまま使えます。
SVGをICOに変換するガイド：サイズ・透過・ファビコン
ICOファイルの中身と、各サイズが使われる場所。
ファビコン作成に必要なICOのサイズ
ICOには複数の正方形の画像が入っていて、表示する場所ごとに必要なものが選ばれます。16pxはブラウザのタブやブックマーク、32pxは高精細画面のタブやWindowsのタスクバー、48pxはデスクトップやGoogleの検索結果、256pxはWindowsの大きい表示で使われます。ファビコンなら16・32・48pxで十分です。Windowsアプリやショートカットには、24・64・128・256pxを加えます。
各サイズをベクターから描画する理由
SVGをサイズごとに描き直すと、どのサイズもくっきりしたエッジになり、細い線も16pxで線のまま残ります。このツールは、SVGをICOに変換する際、選んだすべてのサイズでこれを行います。一覧で16pxのアイコンを確認しましょう。細かいディテールのあるマークや横長のロゴタイプは、このサイズではシンボルだけにすると最も見やすくなります。
透過、背景の形、余白
ICOファイルは完全なアルファチャンネルを保持するので、透明な部分や柔らかなエッジは、どんなタスクバーやタブでも透明のままです。背景色を選ぶと、マークを正方形・角丸タイル・円形にのせられます。角丸や円形の周囲の四隅は透過のままです。端まで届くマークは、10%〜15%の余白を取ると窮屈に見えません。
ファビコン一式とHTML
ブラウザは今も/favicon.icoを要求するため、これが基本になります。最新のブラウザはicon.svgを優先します。どのサイズでもシャープで、SVGのダークモード配色も保持されます。iPhoneは180pxのapple-touch-icon.pngを使います。iOSは透過部分を黒で表示するため、SVGが透過の場合は白背景にします。Androidとインストール済みアプリは、manifestから192pxと512pxのアイコンを読み込みます。ファイルをサイトのルートに置き、4行のコードを<head>に貼り付けてください。
ドット絵と細い線のアイコン
ドット絵はグリッドの整数倍で正方形のまま保たれます。16pxのデザインなら16・32・48・64・128・256pxが適しているので、これらのサイズを選びましょう。24pxグリッドで描いた線アイコンは24pxと48pxで最もくっきりし、16pxでは線幅を1ピクセル以上にするとすべての線が鮮明に表示されます。
SVGから変換したICOが活躍する場面
ファビコン作成など、今もICOが求められる場所。
Webサイトのファビコン
サイトのルートにfavicon.ico。さらにスマホやアプリ向けの一式も。
Windowsアプリとインストーラー
Electron、.NET、セットアップ作成ツール向けに、16〜256pxを1つのICOに。
ショートカットとフォルダー
Windowsのデスクトップショートカットやフォルダーのカスタムアイコンに。
Webアプリ
インストール可能なWebアプリ用の192px・512pxアイコンとmanifest。
SVGをICOに変換：よくある質問
変換方法、ファビコンのサイズ、favicon.icoの現状、透過、SVGファビコン、Windowsアイコン、ぼやけ、プライバシーについて。