SVG→ICO変換ツール
下にSVGをドロップすると、ICOファイルが作成されます。ベクターは16〜256 pxの中から選んだサイズごとに描画されるため、.ico内の各アイコンは、1枚の大きなビットマップを縮小したものではなく、それぞれのピクセルグリッドに合わせてレンダリングされます。できあがったファイルは、favicon.icoとしてもWindowsアイコンとしても使えます。デバイスから追加したSVGは、ブラウザの外には送信されません。
変換前にSVGを確認しましょう
- viewBoxを指定する。 描画を正方形に合わせて拡大縮小できるよう、ルートのsvg要素にはviewBox属性が必要です。viewBoxがないと、アイコンが切れたり、中心からずれたり、空白になったりすることがあります。
- テキストをアウトライン化する。 テキストのままだと、ブラウザにインストールされているフォントで描画されます。Figma、Illustrator、Inkscapeでテキストをパスに変換しておけば、どの環境でも文字が同じように表示されます。
- 画像とスタイルを埋め込む。 ブラウザがSVGをcanvasに描画するときは、リンクされた画像や外部スタイルシートが読み込まれないため、アイコンから消えてしまいます。画像はdata URIとしてインライン化し、CSSはファイル内に記述してください。
- 16 px向けに簡略化する。 1ピクセルより細い線は、16 pxや32 pxではにじんでグレーになります。主にブラウザのタブで表示されるアイコンなら、変換前に細い線を太くし、細かいディテールを省いてください。
SVGをICOに変換する方法
- SVGを追加する. アップロードボックスにドラッグするか、デバイスから選ぶか、貼り付けます。最大10 MBのファイルに対応しています。
- サイズを選ぶ. ファビコンには16、32、48 pxを残しておきます。Windowsでアプリアイコンとして表示する場合は、256 pxも追加してください。
- スケーリングを選ぶ. 「収める」を選ぶと、ロゴ全体が正方形の中に収まります。白い背景にしたい場合を除き、背景は「透明」のままにしてください。
- 変換して保存する. 「変換」をクリックして、.icoをダウンロードします。複数のSVGは、「ファイルをダウンロード」でまとめてZIPとして保存できます。
SVG→ICO変換のよくある質問
ICOが空白になったり、一部が欠けたりするのはなぜですか？
多くの場合、SVGにviewBoxがない、外部の画像やスタイルシートにリンクしている、またはブラウザにないフォントを使っていることが原因です。SVG側でそれらを修正してから、もう一度変換してください。それぞれのケースは、SVG→ICO変換のトラブル解決ガイドで解説しています。
ICOはベクターのままですか？
いいえ。ICOは固定サイズのビットマップ画像を格納する形式なので、SVGは選んだサイズごとに1回ずつラスタライズされます。元のSVGはマスターファイルとして保管しておいてください。
16 pxでもアイコンはくっきり表示されますか？
16 × 16で直接レンダリングされるため、そのサイズで可能な限りシャープになります。それでも1ピクセルより細かいディテールは残らないので、先に細い線を簡略化してください。
代わりにSVGのファビコンを使うべきですか？
現在のブラウザの多くはlinkタグ経由でSVGのファビコンに対応していますが、多くのツールや古いブラウザは今も/favicon.icoを要求します。モダンブラウザ向けにSVG、フォールバックとしてICOと、両方を用意しているサイトもたくさんあります。
デザインツールのコツを交えた手順については、SVG→ICO変換ガイドをお読みください。
PNGをお持ちの場合は、PNG→ICO変換ツールをお使いください。
JPG、WebP、GIF、BMP、AVIFファイルは、トップページのICOコンバーターで変換できます。