コンテンツへスキップ
Vizua

ファビコン生成 — 一般的な六種類のPNGサイズ

ファイルが端末の外に出ることはありません

ロゴまたはアイコンをここにドロップ

またはクリックして選択

JPG、PNG、WebP、SVGに対応

一般的な六種類のPNG版を生成

Vizuaは16 × 16、32 × 32、48 × 48、180 × 180、192 × 192、512 × 512のPNGファイルを書き出します。一般的なブラウザ、タッチアイコン、Android、PWAの用途を複数カバーしますが、一つの一覧ですべての要件を満たせるとは限りません。プロジェクトによってはICOファイル、ウェブマニフェスト、マスカブル画像、プラットフォーム設定、別のサイズも必要です。

正方形で判別しやすい図柄を使用

元画像全体が各正方形のキャンバスに合わせて縮小されます。正方形でない画像は切り抜かれずに引き伸ばされ、余白や小さいサイズ専用の簡略版は生成されません。16ピクセル版と32ピクセル版を実寸で確認してください。元画像では明瞭な細部も、縮小後には消えることがあります。

公開作業は別の手順

ZIPに入るのはPNG画像だけです。適切な<link>タグ、マニフェスト項目、ファイル名、キャッシュ方針、プラットフォーム用メタデータを自分のプロジェクトへ追加してください。最終的に配信されたURLを使い、ブラウザタブ、ブックマーク、ホーム画面への追加、PWA監査を試します。

ブラウザ内処理

画像のデコード、SVGのラスター化、PNG書き出しはブラウザ内で実行されます。選択した元画像はVizuaの画像処理サーバーへ送信されませんが、ページは必要な素材やその他のサイト機能を取得する場合があります。元のメタデータとベクターとしての編集性はPNG版に保持されません。

よくある質問

Vizuaはどのファイルを生成しますか?

ZIPには六つのPNGが入ります:16 × 16、32 × 32、48 × 48、180 × 180、192 × 192、512 × 512。favicon.ico、site.webmanifest、browserconfig.xml、マスカブルアイコン、HTMLマークアップは生成しません。

どのような画像を読み込めばよいですか?

少なくとも512 × 512ピクセルの正方形画像、または自己完結型SVGを使ってください。正方形でない画像は正方形の出力へ引き伸ばされ、非常に細かい部分は16または32ピクセルで不鮮明になることがあります。

ウェブサイトにファビコンを追加する方法は?

対象のブラウザとプラットフォームに合うPNGを、適切なlink要素とマニフェスト項目から参照してください。要件はサイトごとに異なり、変更される場合もあります。最終的な一式をブラウザ、PWAツール、配信環境で検証してください。

Favicon作成 — 一般的な六種類のPNGサイズでできること

ラスター画像または自己完結型SVGから一般的な六種類のfaviconとタッチアイコン用PNGを生成し、ファイル一式をZIPでダウンロードできます。

Favicon作成 — 一般的な六種類のPNGサイズは、最新のブラウザで素早く繰り返し作業するためのツールです。このページの設定を使えば、ソフトウェアのインストールやアカウント作成をせずに結果を準備できます。

Favicon作成 — 一般的な六種類のPNGサイズの使い方

  1. 処理するファイルを選択またはドロップするか、ツールが求める情報を入力します。
  2. 処理前に、形式、寸法、品質、色など、出力に影響する設定を確認します。
  3. 結果を確認して新しいファイルを保存し、別の版が必要になった場合に備えて元のファイルは変更せず残します。

プライバシーを最優先

ファイルが端末の外に出ることはありません。すべての処理はブラウザ内で行われます。

より良い結果を得るためのヒント

  • できるだけ状態の良い元データを使ってください。小さい画像、ぼけた画像、強く圧縮された画像は、保持できる細部が少なくなります。
  • 保存前に寸法と形式を確認し、使用先のサイト、アプリ、プリンター、プラットフォームに合うようにします。
  • 大きなファイルでは不要なタブを閉じ、まとめて処理する前に代表的な1ファイルで試します。
  • 共有したり元のファイルと置き換えたりする前に、保存した結果を一度開いて確認します。

作業工程でのFavicon作成 — 一般的な六種類のPNGサイズの使いどころ

Favicon作成 — 一般的な六種類のPNGサイズは、単発の調整にも、公開、共有、保管、別のアプリでの追加編集に進む前の準備にも使えます。一括処理がある場合は、まず少数のサンプルで設定を確認し、その後に残りのファイルへ適用してください。