ブラウザベースのファビコン生成の仕組み
生成パイプライン全体は、Canvas APIとfflate圧縮ライブラリを使用してブラウザタブ内で実行されます。サーバーサイド処理、アップロード、サードパーティサービスは一切必要ありません。
- ソース画像を読み込むか、テキストや絵文字をオフスクリーンキャンバスに高解像度でレンダリングします。画像を選択した場合、ブラウザがネイティブにデコードします。テキストモードを選択した場合、ページは選択されたフォント、前景色、背景色で単語をキャンバスに描画します。
- 各ターゲットサイズ（16、32、48、180、192、512ピクセル）に対して、ページはその正確な寸法で新しいオフスクリーンキャンバスを作成し、Canvas APIを使用してソースコンテンツを描画します。ブラウザの組み込み画像リサイズ機能がバイリニアまたはバイキュービックフィルタリングで自動的にダウンスケールを処理し、すべてのサイズでシャープなファビコンを生成します。
- 各キャンバスは
canvas.toBlob()を介してPNG Blobにエクスポートされます。プレビューパネルには6サイズすべてが表示され、ダウンロード前に結果を確認できます。ファイル名から即利用可能な HTMLブロックとWebアプリマニフェストスニペット（manifest.json）が構築され、サイトのheadタグに直接配置できます。 - ZIPのダウンロードをクリックすると、ページはすべてのPNG Blobをメモリに読み込み、fflateを使用して
manifest.jsonとともに単一のZIPアーカイブにパッケージ化し、ワンクリックでダウンロードを開始します。バンドル全体がブラウザ内で構築され、どの段階でもアップロードは行われません。
ブラウザでファビコンを生成する理由
- 完全なファビコンセットがあれば、初回訪問時のブラウザのファビコン未検出404を排除し、ブックマーク、ブラウザタブ、PWAインストール画面でプロフェッショナルな外観を確保できます。サイズが不足すると、ブラウザは何も読み込まないか、ぼやけた最近傍スケールにフォールバックします。
- バンドルされた HTMLとマニフェストスニペットにより、6つのタグとJSONマニフェストブロックを手書きする手間が省けます。サイトのheadに貼り付け、必要に応じてパスを調整すれば、数分ではなく数秒で完了します。
- 写真編集ソフトがないロックダウンされた企業デバイスでは、クライアントサイド生成が唯一の選択肢です。アップロードがないため、データ漏洩リスクがなく、機密画像やブランド画像のコンプライアンスレビューも不要です。
- テキスト/絵文字モードでは、画像がなくてもファビコンを生成できます。ブランドの頭文字、文字、絵文字を入力し、フォントと色を選ぶだけで完全なセットを取得できます。個人プロジェクト、プロトタイプ、仮のファビコンが必要なサイトに最適です。
一般的なファビコン生成のユースケース
ブックマークやインストールされるすべてのサイトにはファビコンが必要です。ブラウザベースのジェネレータが時間を節約する3つのシナリオをご紹介します。
- 新しいランディングページやマイクロサイトのセットアップ。ブランドロゴから1分以内に完全なファビコンセットを生成し、タグをサイトのheadにコピーしてデプロイ。デザインツールは不要です。
- プログレッシブWebアプリ用のPWAアイコンの作成。manifest.jsonには192×192と512×512のPNGアイコンが必要です。他のファビコンセットと一緒にワンステップで生成でき、手動でロゴをリサイズする必要はありません。
- プロトタイプやステージングサイト用のプレースホルダ作成。単一の文字や絵文字を入力し、背景色を選ぶだけで、デザインチームの最終ブランドアセットを待たずにリアルなファビコンを取得できます。
実例：企業ロゴからファビコンセットを生成
500×500のPNGロゴがあり、新しいマーケティングサイト用の完全なファビコンセットが必要です。
このページを開き、ロゴPNGをアップロードゾーンにドロップします。画像が読み込まれ、サイズグリッドとともにプレビューが表示されます。ファビコンを生成をクリックします。ページは16、32、48、180、192、512ピクセルの6つのオフスクリーンキャンバスにロゴを描画し、各結果を表示します。プレビューパネルの下には、16/32/48サイズのrel="icon"エントリ、180サイズのapple-touch-iconリンク、PWAアイコン用のmanifestリンクを含む即利用可能な HTMLブロックが表示されます。その下のマニフェストスニペットには192と512のアイコンがリストされます。ZIPをダウンロードをクリックすると、fflateを介して6つのPNGとmanifest.jsonが単一のZIPアーカイブにパッケージ化されます。全体の処理は2秒で完了し、初期ページ読み込み以外の帯域幅は消費しません。
このツールはどのファビコンサイズを生成しますか？
6サイズ：標準ブラウザファビコン用に16×16、32×32、48×48、Apple Touch Icon用に180×180、PWAマニフェストアイコン用に192×192と512×512。すべてのサイズがPNGとして出力されます。モダンブラウザはを介してPNGファビコンを受け入れます。
テキストや絵文字からファビコンを生成できますか？
はい。テキスト/絵文字モードに切り替え、単語を入力するか絵文字を貼り付け、フォント、前景色、背景色を選んで生成をクリックします。テキストは高解像度でオフスクリーンキャンバスにレンダリングされ、各ターゲットファビコンサイズにリサイズされます。
画像はサーバーにアップロードされますか？
いいえ。画像がデバイスから送信されることはありません。ページはブラウザのFile APIを使用して画像をメモリに読み込み、Canvas APIを使用して各ファビコンをリサイズおよびエクスポートします。生成中にDevToolsのネットワークパネルを開いても、発信リクエストは初期ページ読み込みと広告呼び出しのみです。画像データは送信されません。
画像アップロードで受け付けられる形式は？
ブラウザがデコードできる任意の形式：PNG、JPEG、WebP、GIF、SVG（ブラウザによりラスタライズ）。ファイルサイズ制限はアップロードあたり10 MBです。
ZIPダウンロードの仕組みは？
ページはfflateライブラリ（共有vendorパスからオンデマンドでロード）を使用して、生成されたすべてのPNGとmanifest.jsonを標準ZIPアーカイブにパッケージ化します。パッケージ化は完全にブラウザメモリ内で行われ、アップロードやサーバー往復は発生しません。ZIPはBlobダウンロードとしてワンクリックで提供されます。
これらのファビコンは任意のWebサイトで使用できますか？
はい。生成されたPNGファビコンは、タグをサポートするすべてのモダンブラウザで動作します。180×180のApple Touch IconはiOSとSafariをカバーします。192×192と512×512のPWAアイコンは、AndroidのChromeおよびその他のPWA対応ブラウザのマニフェスト要件を満たします。
真の.ico形式オプションはありますか？
現在のバージョンはPNGを出力します。すべてのモダンブラウザがを介してPNGを受け入れるためです。真のマルチ解像度.ico形式はまだサポートされておらず、将来のリリースで追加される可能性があります。