SVGをICO(ファビコン)に変換
ファビコンの素材としてベクターは理想的です。SVGを宣言サイズの4倍で描画してから各サイズへ縮小するため、小さなラスターを引き伸ばしたときのぼやけが起きません。透過を保った16・32・48pxの3サイズが1つの.icoに収まります。
あわせて便利: SVGをPNGに変換
使い方
ロゴやアイコンのSVGファイルをドロップします。ベクターがそのまま素材になります。
宣言サイズの4倍でレンダリングされた後、16・32・48pxへ縮小 — 拡大によるぼやけが構造的に発生しません。
透過付きの.icoをダウンロードし、SVGファビコン指定と並べてサイトに設置すれば全環境対応です。
SVG vs ICO
ソースとしてはSVGの完勝です。ラスター素材は元の解像度が上限になりますが、ベクターは各サイズを「描き直す」ので16pxでも図形が保たれます。ただし配信はICOの仕事 — SafariはSVGファビコンを今も無視するため、両方置くのが定石です。
| SVG | ICO | |
|---|---|---|
| 圧縮方式 | ベクター(XMLテキスト) | 可逆(BMPまたはPNGを格納) |
| 透過 | あり(フルアルファ) | あり(フルアルファ) |
| アニメーション | あり(CSS/SMIL) | なし |
| 対応環境 | 全ブラウザ対応。ただしアップロードフォームでは拒否されがち | ファビコン用途ではあらゆる環境 |
| 向いている用途 | ロゴ、アイコン、イラスト | ファビコン、Windowsアプリのアイコン |
よくある質問
いいえ。変換はWebAssemblyによってブラウザ内で完結するため、ファイルがお使いの端末の外に出ることは一切ありません。サーバーを介さない仕組みなので、ページを一度読み込めばオフラインでも動作し、ファイルサイズの制限も端末のメモリ以外にはありません。
各サイズを拡大縮小ではなく「描き直す」からです。4倍サイズで描画してから縮小するため、16pxエントリも幾何学的に可能な限界までシャープになります。ラスター素材は元の解像度が天井になりますが、ベクターにはその天井がありません。
形は残りますが、細部は残りません。細い線・小さな文字・飾りの類いは、どんなに完璧なソースでも16pxで溶けます。多くのデザインシステムがファビコン用に簡略版マークを別に持っているのはこのためです。
併用が正解です。モダンブラウザは<link rel="icon" type="image/svg+xml">を解釈し、SVG内のダークモード対応も効きます。一方SafariはSVGファビコンを無視し続けているため、全環境の保険としてこの.icoをルートに置いてください。
システムフォントの文字は描画されますが、外部参照のWebフォントは描画時にブロックされ、代替フォントに落ちることがあります。確実なのはデザインツールで文字をアウトライン化してから書き出す方法です。
外部画像を参照しているSVGです。埋め込みでない画像はレンダリングされず、欠けた絵からアイコンが作られてしまいます。その場合は一度透過PNGに書き出してからPNGをICOに変換を使うのが確実です。
関連ツール
SVGをPNGに変換
SVGを1〜4倍のスケールで高解像度PNGに書き出す無料ツール。透過は設計どおり、輪郭はどの倍率でも鮮明です。ラスタライズはすべてブラウザ内で行われ、ファイルは送信されません。
PNGをICO(ファビコン)に変換
PNGから16・32・48pxの3サイズ入りICOファビコンをブラウザ内で作成できます。透過はそのまま維持され、アップロードも登録も不要。正方形でない画像は中央で自動的に切り抜きます。
ICOをPNGに変換
ICOファイルの最大サイズのアイコンをPNGとして無劣化で取り出せます。透過も維持。変換はブラウザ内で完結し、ファビコンやWindowsアイコンの再編集にすぐ使えます。
SVGをPDFに変換
SVGを宣言サイズでラスタライズし、無劣化でPDFに埋め込む無料ツール。ベクターのままではない点は正直にお伝えします。プレビューや提出には十分、印刷入稿にはデザインツールをどうぞ。