概要 (TL;DR)
- ユニバーサル入力:PNG、JPG、WebP、またはSVGを有効なFaviconセットに変換します。
- スマートサイズ:「カバー(切り抜き)」または「コンテイン(パディング追加)」を選択して、正方形のアイコンに完璧に合わせます。
- 本番標準:単一のファイルだけでなく、現代のWeb互換性に必要な
favicon.ico+ PNGの組み合わせを生成します。
なぜ専用コンバーターを使うのか?
単にlogo.pngをfavicon.icoにリネームすることはできません。ICO形式は、異なるサイズの複数のラスター画像を保持する特定のコンテナです。ブラウザは、現在のコンテキスト(タブリスト、ブックマークバー)に最も鮮明なバージョンを選択するためにこれを必要とします。
このツールは技術的な複雑さを処理します:
- リサンプリング:16x16アイコンがぼやけるのを防ぐための高品質なダウンサンプリングフィルター(Lanczos3)。
- コンテナ構築:16x16、32x32、48x48バージョンを単一のバイナリ
.icoファイルにコンパイル。 - モダンフォールバック:Android、PWA、高DPIスクリーン用の標準PNG(192x192、512x512)の生成。
スマートクロッピング:カバー vs コンテイン
ほとんどのロゴは長方形ですが、Faviconは正方形でなければなりません。
1. カバー (Cover / Crop to Fill)
- 動作:画像が正方形を埋めるまでズームします。端は切り落とされます。
- 最適:シンボル、モノグラム、またはほぼ正方形のアイコン。
2. コンテイン (Contain / Fit Center)
- 動作:画像を縮小して正方形内に完全に収め、透明なパディングを追加します。
- 最適:切り抜けられない横長のワードマークや縦長のロゴ。
プロのヒント:ロゴが横長のワードマークの場合、16x16の正方形に押し込もうとしないでください。読めなくなります。ブランドの簡略化された「イニシャル」または「シンボル」バリエーションを作成してください。
ICO形式を理解する
.icoファイルはユニークです。PNGとは異なり、画像のディレクトリです。
- 16x16:デスクトップの標準タブアイコン。
- 32x32:高DPI(Retina)スクリーンとタスクバーショートカット用。
- 48x48:Windowsがデスクトップアイコンに使用。
ベストプラクティス
- 大きく始める:少なくとも512x512ピクセルの画像をアップロードしてください。
- コントラストを確認:ロゴが明るい背景と暗い背景の両方で見えることを確認してください。
- 透明性が鍵:入力として透明なPNGまたはSVGを使用してください。白い背景は、現代のダークモードブラウザタブでは古臭く見えます。
よくある質問 (FAQ)
なぜFaviconがぼやけるのですか?
16x16ピクセルでは、256ドットしかありません。複雑な詳細は消えてしまいます。解決策は、よりシンプルなデザインを使用することです。
PNGだけを使用できますか?
ほとんどの最新ブラウザはPNGをサポートしていますが、厳格なレガシーサポートは依然としてfavicon.icoを探します。両方提供するのが最も安全です。