サインアップせずにPNGからファビコンパッケージを作成するにはどうすればよいですか？

アイコンジェネレーターが1つのPNGから生成する7つのファイル、それぞれが何を読み込み、サーバー上のどこに配置する必要があるか、透明部分がなぜ不透明になるのか。

August 9, 2026

ファビコンはファイルではありません。それは一連のファイルです。ブラウザタブ、iOSホーム画面、Androidインストールプロンプトは、それぞれ異なるサイズの異なる画像を要求します。1つのPNGを私たちのアイコンジェネレーターにドロップすると、7つのファイルが出力されます。それぞれのファイルが何のためにあるのか、サーバー上のどこに配置する必要があるのか、どれをスキップできるのかを説明します。

全てはページ内で実行されます。このアプリにはAPIルートもサーバーアクションもないため、ロゴはcreateImageBitmapで読み込まれ、OffscreenCanvasに描画され、あなたのブラウザによってPNGにエンコードされます。アカウントは不要で、1時間以内にアートワークを削除する約束もありません。

7つのファイルは何で、それぞれ何をしますか？

7つのファイル、1つのソース画像。以下のサイズは、942.4 KBの900x606の透明PNGであるalpha.pngを使用した実際の実行から得られたものです。バイト数は各サイズで生き残る詳細の量に依存するため異なりますが、ファイル名とピクセル寸法はツールによって固定されています。

7つすべては必要ありません。デスクトップタブだけが気になる場合は、favicon.icoだけで済みます。Appleのファイルは、誰かがあなたのサイトをホーム画面に保存した瞬間から重要になります。2つのAndroid PNGは、実際にマニフェストを出荷する場合にのみその地位を得ます。

ファイルはどこに配置し、ヘッダーには何を入れるべきですか？

すべての7つはウェブルートに配置する必要があり、/favicon.ico、/apple-touch-icon.pngなどとして解決されます。Next.jsではpublicフォルダーです。その後、ヘッダーに4つのタグを追加します：1つのapple-touch-iconリンク（180x180）、32と16のための2つのrel=iconリンク、そしてマニフェストへの1つのリンク。ツールは、結果の横にそのスニペットを印刷し、コピーボタンを提供します。

site.webmanifestは、name、short_name、2つのAndroidアイコン、theme_color、background_color、displayがstandaloneに設定された371バイトのJSONです。内部のアイコンパスは絶対的に書かれており、/android-chrome-192x192.pngのようになっているため、パッケージを/assets/icons/に駐車すると、それらが静かに壊れ、両方のsrc値を編集する必要があります。もう1つの罠：パネルの両方のnameボックスを空のままにすると、マニフェストはリテラル名「My App」で出荷され、これは電話がアイコンの下に印刷するものです。

なぜそのスニペットにfavicon.icoが含まれていないのですか？

ブラウザが指示なしでそれを要求するからです。タグは必要ありません。HTML仕様のrel=iconセクションは/favicon.icoの慣例を説明しています：ドキュメントがアイコンリンクを宣言しない場合、ブラウザは自動的にそのルートパスを試みます。これが、.icoがゼロマークアップで機能する理由であり、ファイルがルートに存在する必要がある理由でもあります。/images/に置かれたコピーは決してリクエストされません。もし本当に他の場所に必要な場合は、パスを指す明示的なアイコンリンクを追加し、推測を止めさせてください。

favicon.icoの中には実際に何が入っていますか？

.icoはコンテナです。私たちのものは、16、32、48ピクセルでレンダリングされた3つのPNGを保持しており、6バイトのヘッダーと各画像ごとの16バイトのディレクトリエントリがあり、これは画像データを囲む54バイトの構造です。これにより、単一の4.6 KBファイルが3つのサイズをカバーします：ブラウザはディレクトリを読み取り、描画しているものに一致するエントリを引き出します。そのディレクトリのバイトレイアウトと、256より大きなものが収まらない理由は、独自の一部です。WindowsはVista以降、.ico内のPNGペイロードを理解しており、現在のブラウザはそれを問題なく処理します。

なぜ私の透明PNGが不透明な背景で出力されたのですか？

すべてのアイコンキャンバスは、ロゴがその上に載る前に塗りつぶされます。背景制御は入力タイプ=colorで、アルファチャネルを持たないため、塗りつぶしは常に不透明で、デフォルトは#ffffffです。ソースが持っていた透明度はその色に対してフラット化されます。ここには透明オプションはありません。生成を押す前に、マークが置かれる表面に合った色を選択してください。

形状も重要です。alpha.pngは900x606で、アイコンは正方形であるため、アートワークは正方形の内部に長軸をフル幅でフィットさせ、背景色がその上と下のバンドを埋めます。これらのバンドが気になる場合は、最初にクロッパーで画像を正方形にし、1ファイルを最大10 MBまで受け入れ、8つのアスペクト比の中から1:1のプリセットを提供します。アイコンパネルのマージンスライダーは0から30%まで動作し、アートワークを4つの側面で均等にインセットします。

196 KBはアイコンファイルとして大きすぎますか？

android-chrome-512x512.pngの196 KBは、521バイトの16pxファイルの横にあると驚くべきに見えます。2つの要素がプレッシャーを軽減します。そのアイコンは通常のページビューでは取得されず、タブは常に小さいものを要求するだけだからです。また、キャンバスエンコーダーから直接出力されたPNGは最適化されていません：convertToBlobは、専用の最適化ツールが行うフィルターやパレット作業なしで有効なファイルを書き出します。これは、私たちのJPGからPDFへの測定でファイルサイズを形成する同じブラウザエンコーダーです。

PNGをコンプレッサーで再処理することで縮小できます。同じ942.4 KBのalpha.pngで、ロスレスモード（oxipngレベル3）は383.9 KBに到達し、ピクセルは変更されずに59%減少しました。小さいファイルモード（imagequant）は98.3 KBに達し、90%減少し、画像をパレットに減らしました。色の少ないフラットなロゴは、パレットが視覚的に何も失わせない場所です。アイコンが写真の場合はロスレスのままにしてください。

サインアップする必要がありますか？ロゴはアップロードされますか？

サインアップ不要で、アップロードするものもありません。このコードベースにはAPIルートもサーバーアクションもなく、ページが行う唯一のリクエストは、自身のアセットのための同一オリジンのフェッチです。生成中にネットワークパネルを開いて、静かに保たれているのを確認してください。私たちのプライバシーページは、この段落よりも少ない言葉でそれを説明しています。

制限は1回に1ファイル、10 MBで、ドロップゾーンはPNG、JPEG、WebP、AVIF、GIF、SVGを受け入れます。SVGは最初に自分の寸法または512ピクセルの大きい方でラスタライズされるため、64pxのソースでもクリーンな512アイコンが得られます。そのレンダリングはファイルを<img>要素に読み込み、SVGから外部フォントやリンクされたビットマップをドロップするのと同じ制限されたパスです。すべては、すべての7つのファイルを含む1つのfavicon-package.zipとしてダウンロードされます。もしあなたのロゴがオーバーサイズのエクスポートとして到着した場合は、最初にサイズ変更して、16ピクセルの正方形に20メガピクセルのバナーをフィードしないようにしてください。

次にこれを行います： アイコンジェネレーターを開き、ロゴをドロップし、アイコンが置かれる場所に合わせて背景色を設定し、生成し、ウェブルートに解凍し、ヘッダーに4つのタグを貼り付け、「start_url」を「/」としてsite.webmanifestに追加します。その後、サイトをハードリロードし、タブを確認してください。16pxバージョンがぼやけている場合は、他の何かを変更する前にマークを簡素化してください。AppleのWebアプリケーションの設定のノートは、iOSホーム画面が優先事項である場合に読む価値があります。