Favicon Generator
Generate favicons
Generate favicons ブラウザ内でローカルに実行
About the
Favicon Generator は画像を取得し、それを中心から正方形に切り取って、サイトのルートにドロップできる 64 x 64 のアイコン ファイルを生成します。切り抜きは思っている以上に重要です。ブラウザはファビコンを正方形に描画するため、幅の広いロゴを正方形に押し込むと間違ったように見えますが、中央の切り抜きでは通常、認識可能な部分が維持されます。画像はブラウザのキャンバス上で処理されるため、何もアップロードされません。
Where people use the
- サイトを立ち上げる前にロゴからファビコンを生成します。
- プロトタイプまたは内部ツール用のクイック アイコンを作成します。
- テンプレートから残ったプレースホルダー アイコンを置き換えます。
- タブで使用するための幅広ロゴの正方形バージョンを作成します。
How to use the
- 1
画像をアップロードする
使用するロゴまたは画像を選択します。正方形のソース画像は何も切り取られないため、最良の結果が得られます。
- 2
切り取ってサイズを変更しましょう
最も短い辺が中心から切り取られた正方形として使用され、結果は 64 x 64 で描画されます。
- 3
2 つのプレビューを比較する
オリジナルとアイコンが並べて表示されるので、切り抜きによって何が削除されたのかがわかります。
- 4
アイコンをダウンロード
ファイルを favicon.ico として保存し、サイトのルートに配置するか、フレームワークが静的アセットを必要とする場所にアップロードします。
ヒントとベストプラクティス
- 幅の広いロゴの端が失われないように、正方形の画像をアップロードしてください。
- アイコンを明るいタブと暗いタブの両方に表示する場合は、アイコンの背景を無地にします。
- アップロード後のハードリロード。ブラウザはファビコンを積極的にキャッシュします。
よくある質問
私のロゴがトリミングされているのはなぜですか?
ファビコンが四角いからです。このツールは、適合する最大の正方形を中心から取得します。正方形のソース画像はトリミングを完全に回避します。
どのサイズをアップロードすればよいですか?
少なくとも 64 × 64、できれば正方形。大きな画像は単純に縮小されます。小さいものは柔らかく見えます。
複数のサイズが必要ですか?
ブラウザはタブ用に 64 ピクセルのアイコンを縮小するため、ほとんどのサイトでは 1 つのアイコンで十分です。どこでも鮮明な結果が必要な場合は、16、32、および 180 ピクセルのバージョンを個別に生成します。
ファイルはどこに行くのでしょうか?
サイトのルートでは、favicon.ico としてブラウザーが要求します。フレームワークが public などのディレクトリから静的ファイルを提供する場合は、代わりにそこに配置します。
タブに古いアイコンが表示されたままなのはなぜですか?
キャッシュされているからです。ページをハードリロードするか、プライベート ウィンドウで開くと、新しいアイコンが表示されます。