実用的なベクターと favicon のワークフロー
PNG から SVG へのベクター化と favicon 用の元画像を選ぶ方法
ベクター化した SVG を確認し、ブラウザ内でファビコン一式を作る実用的な手順です。
ツールを開く最終用途から始める
SVG は拡大表示する単純なマークに向き、ファビコンは16または32ピクセルでも識別できる必要があります。元画像を残し、用途に合わせて選びます。
ベクター化はピクセルをパスに変換する処理で、元のデザインデータを復元するものではありません。ロゴ、アイコン、線画、シルエットは、写真、質感、影、グラデーションより適しています。
PNG を準備する
最も鮮明な PNG を使い、不要な余白を切り、ノイズを除きます。元の SVG やベクターデータがあれば、ラスターデータに書き出した画像を再度ベクター化せず、その元データを使います。
色付きのマークにはカラーモード、線画やシルエットには白黒モードを使い、まず中程度の詳細度から始めます。
バッチ前に一つ確認する
代表画像を調整し、曲線、端、穴、線、最終サイズを確認します。
バッチは20 PNGまでで、それぞれ独立して処理します。ZIP をダウンロードして複数の出力を確認します。
単純な favicon を作る
正方形でコントラストが高く細部の少ないマークを使います。小さい文字は16ピクセルでは機能しません。
ブラウザ内の生成機能は、16、32、48、180、192、512ピクセルの PNG、ICO、Web App Manifest を ZIP にまとめます。
データ境界を分ける
PNG から SVG へのベクター化は一時的なサーバー処理です。上限はファイル20 MB、画像16メガピクセル、ベクター化処理2.5メガピクセル、処理時間2分で、保持時間は定期削除を伴う30分に設定されています。
ファビコンはブラウザ内で生成され、元画像は MV Tools のサーバーに送信されません。
よくある質問
写真はきれいなベクターになりますか？
通常は多くのパスが生成され、不自然で複雑な SVG になるため、適していません。
最初にバッチを使いますか？
いいえ、まず一枚を試します。
favicon はアップロードされますか？
いいえ、ローカルです。