èªã¿è¾¼ã¿ä¸...
èªã¿è¾¼ã¿ä¸...
1つの画像をドロップして、現代のサイトに必要なすべてのファビコンサイズを取得します — favicon.ico、ブラウザ、Apple、Android用のPNGサイズ、さらにコピー可能なHTMLとマニフェストスニペット。
ファビコンジェネレーターは、1つのソース画像を現代のウェブサイトが必要とするアイコンファイルのファミリーに変換します — ブラウザが自動的に取得するレガシーな.icoファイル、タブやブックマークに表示される小さなPNGサイズ、iPhoneユーザーがホームスクリーンにサイトを追加する際に使用される180ピクセルのapple-touch-icon、そしてAndroidがウェブマニフェストから取得する192/512ピクセルの画像です。手動で行う場合は、画像編集ソフトを開き、7つの別々のファイルをエクスポートし、HTML内に長い<link>タグのブロックを書く必要があります。このジェネレーターは、ブラウザ内で全てのパイプラインを実行します：1つの画像をドロップし、すべてのサイズを取得し、一致するHTMLとマニフェストスニペットをコピーします。あなたの画像はページを離れません。
512×512ピクセル以上の正方形のPNG、JPG、WebP、またはSVGをアップロードしてください。非正方形のソースは正方形のキャンバスにレターボックスされるため、ロゴが切り取られることはありませんが、小さな詳細はソースがすでに正方形であるときに最も鮮明に見えます。
ロゴが明るいブラウザのクロームと暗いブラウザのクロームの両方で読み取れる場合は透明のままにします。アイコンに白いタブに対して消えてしまう明るい前景がある場合は、単色に切り替えます — ほとんどの企業のタブは非常に明るいです。
16ピクセルおよび32ピクセルのプレビューを注意深く見てください。ほとんどのロゴはそのサイズで詳細を失います。結果がぼやけている場合は、ソースを単純化してください — 色を減らし、ストロークを太くし、細かい文字を減らし、再アップロードします。
すべてダウンロードを使用してfavicon.icoと6つのPNGサイズを取得します。それらをサイトのルートに配置します。.icoには内部に16、32、48 pxのPNGが含まれており、これは現在のChrome、Firefox、Edgeが期待するものです。
HTMLスニペットをすべてのページの<head>にコピーします。site.webmanifestスニペットをアイコンと一緒に保存して、誰かがあなたのサイトを追加したときにAndroidが正しいホームスクリーン画像を表示できるようにします。
1. ブラウザのネイティブ画像ローダーを使用してアップロードされた画像をデコードします。
2. 各ターゲットサイズ（16、32、48、180、192、512）に対して、正方形のキャンバスに描画します。
3. ソースをレターボックスして、長い側がキャンバスにフィットするようにします — 切り取らず、引き伸ばさず。
4. canvas.toBlob('image/png')を介してキャンバスをPNGとして再エンコードします。
5. favicon.icoの場合、16/32/48 PNGをICONDIR + ICONDIRENTRY構造に組み立てます。
6. 16バイトのディレクトリエントリの後にPNGバイトを連結します — これは有効なマルチ解像度の.icoです。現代のブラウザとAppleデバイスは、.icoコンテナ内に埋め込まれたPNGバイトを受け入れます — 元々Windows 95と共に出荷された古いBMP-with-AND-mask形式をエンコードする必要はありません。コンテナは、6バイトのヘッダー（予約 + タイプ + カウント）、含まれる各画像ごとに1つの16バイトのディレクトリエントリ（サイズ + ビット深度 + オフセット + 長さ）、および連結されたPNGペイロードから成ります。これがこのツールが生成するものであり、Chrome、Firefox、Safari、Edgeがあなたのサーバーから/favicon.icoをリクエストするときに取得するものです。
参考文献: Wikipedia — ICOファイル形式
| ソース画像 | 期待される結果 |
|---|---|
太字の正方形ロゴ、1024×1024 PNG、透明な背景 | すべてのサイズで鮮明です。16ピクセルと32ピクセルのプレビューも明確に読み取れます。生産サイトに直接ドロップできます。 理想的な入力。 |
横に広いワードマーク、2000×400 | 正方形のキャンバスにレターボックスされ、上下に空白の帯があります。ワードマークは192ピクセルと512ピクセルではまだ読み取れますが、16ピクセルと32ピクセルでは読めません — テキストが小さすぎます。 アップロードする前に正方形のマークに切り取ってください。 |
薄いグラデーションのアウトラインを持つ写真ロゴ | グラデーションとアウトラインは16ピクセルと32ピクセルで消えます。同じロゴの単純化された高コントラストバージョンをアイコンサイズのアセットに使用してください。 詳細の損失はソースの問題であり、エクスポートの問題ではありません。 |
幅や高さが明示されていないSVG | ブラウザがviewBoxから派生したサイズなしでSVGを割り当てるデフォルトの300×150でレンダリングされます。アップロードする前に、ソースSVGにwidth/height属性またはviewBoxを追加してください。 SVGのエッジケース — ソースを修正してください。 |
最終更新日