favicon.icoはまだ必要ですか、それともPNGで十分ですか？
ICOは16、32、48を1つの4.6 KBファイルにまとめるディレクトリ形式です。その中に何が含まれているのか、なぜPNGがそれを置き換えないのか、そして出荷する7つのファイルについて説明します。
数年ごとに誰かがfavicon.icoは死んだと宣言します。それからフィードリーダーや古いWindowsショートカットが/favicon.icoを要求し、404を受け取り、空白のページのグリフを表示します。ICOを出荷するのにかかるコストは4.6 KBです。これが全ての議論であり、私たちのアイコンジェネレーターが今でも1つを書き出す理由です。
alpha.pngという900x606の透明な画像を入力すると、7つのファイルが出力されます：favicon.icoは4.6 KB、favicon-16x16.pngは521 B、favicon-32x32.pngは1.4 KB、apple-touch-icon.pngは28.4 KB、そして2つのandroid-chrome PNGはそれぞれ31.9 KBと196 KB、さらに371 Bのsite.webmanifestが加わります。あなたのブラウザがすべて7つを生成します。このアプリにはAPIルートが全くないため、私たちはそのように構築しました。これは、すべてのサーバーサイドのfaviconサイトが自分自身について言えない文です。
.icoファイルの中には実際に何が含まれていますか？
ICOはディレクトリ形式です。ファイルは6バイトで開きます：0に設定された予約語、アイコン用に1に設定されたタイプ語、続く画像の数を示すカウントです。その後、各画像ごとに1つの16バイトエントリが続き、幅、高さ、色数、予約バイト、カラープレーン、ピクセルあたりのビット、画像データのバイト長、ファイルの開始からのオフセットを持ちます。次に、ペイロードが連結されます。マイクロソフトのアーカイブされたアイコン記事は、1995年にこれら2つの構造をICONDIRおよびICONDIRENTRYとして文書化しており、それらは変更されていません。
幅と高さはそれぞれ1バイトを取得します。これが256x256が0として保存されなければならない理由であり、256より大きいものはディレクトリに収まらない理由です。私たちのエンコーダーは各エントリに対して1つのカラープレーンと32ビットを記録し、各ペイロードはプレーンPNGです。1995年の仕様は、透明性のために1ビットのANDマスクに続くDIBを記述しており、これが古いアイコンがその硬いギザギザのエッジを持っていた理由です。3つの画像は6バイトのヘッダーと48バイトのディレクトリを意味します。これは54バイトの帳簿管理であり、4.6 KBの残りはPNGデータです。
なぜ1つのfavicon.icoに16、32、48が含まれているのですか？
これらは私たちのパックする3つのサイズであり、恣意的ではありません。同じマイクロソフトの文書は、開発者にすべてのアイコンリソースに16x16、32x32、48x48を含めるように指示し、次に選択ルールを明示します：要求されたサイズに最も近いサイズの画像が勝ちます。タブストリップは16を要求します。2xディスプレイでは、その同じ16 CSSピクセルスロットは32実際のピクセルを要求し、Windowsデスクトップショートカットは48を要求します。ICOが16のみを保持している場合、ショートカットは48に引き伸ばされた16 px画像を取得し、まさにそのように見えます。
ブラウザがPNGを読み取るなら、なぜICOを出荷するのですか？
なぜなら、2つは異なる方法で発見されるからです。私たちのツールが提供する4行のスニペットは、明示的なタイプとサイズのヒントを持つPNGファイルの名前を付け、`<head>`を解析する任意のクライアントがそれを受け取ります。MDNの`<link>`リファレンスは同じ形を示し、ブラウザが選択できる属性を持ついくつかのアイコンリンクがあります。HTML標準も、アイコンリンクが宣言されていない場合にユーザーエージェントが/pathを探すことを許可します/favicon.ico、そしてあなたのURLを取得する多くのものはあなたのマークアップを読みません。SVGファビコンはここで魅力的であり、caniuseはそれらを90.49%のグローバルサポートとし、Safariはバージョン26.0でのみそれらを取得します。それは実際のテールを残します。
7つのファイルは何で、どのくらいのサイズですか？
| ファイル | ピクセル | サイズ | 何がそれを読みますか |
|---|---|---|---|
| favicon.ico | 16、32、48がパックされている | 4.6 KB | /favicon.icoパスのフォールバック、Windowsショートカット |
| favicon-16x16.png | 16x16 | 521 B | 1xのタブストリップ、リンクタグ経由 |
| favicon-32x32.png | 32x32 | 1.4 KB | 2xのタブストリップ、リンクタグ経由 |
| apple-touch-icon.png | 180x180 | 28.4 KB | iOSホームスクリーン、リンクタグ経由 |
| android-chrome-192x192.png | 192x192 | 31.9 KB | マニフェストアイコン配列 |
| android-chrome-512x512.png | 512x512 | 196 KB | マニフェストアイコン配列 |
| site.webmanifest | 該当なし | 371 B | インストールプロンプト |
512が支配的です。ICO、両方の小さなPNG、apple-touch-icon、192を合わせると、合計で67 KB未満になりますが、その1つのファイルは196 KBです。ページビューで実際にコストがかかるものを知っておく価値があります。なぜなら、ICOと2つの小さなPNGだけがそこに関与しているからです。
なぜ私の透明なロゴが白い四角の上に座っているのですか？
ジェネレーターがキャンバスを塗りつぶしてからあなたのアートワークを描くため、デフォルトの塗りつぶしは#ffffffです。その制御は色の入力であり、常に何らかの色が下にあります。ブランドの16進数に設定すれば、全体のセットがあなたのサイトに合います。alpha.pngはアルファチャンネルを持って入力され、7つの画像すべてが不透明として出力されます。これは、透明なファビコンを期待する人々を驚かせます。
マージンスライダーは0から30パーセントまで動作し、各アイコンのエッジのその割合でアートワークを内側に配置します。したがって、10パーセントでは32 pxアイコンが各側に3 pxのボーダーを保持します。それはそのスケールで目に見える量です。非正方形のソースはレターボックスされます：900x606のロゴはアスペクト比を保持し、上下に背景バーを追加します。それが気になる場合は、最初に正方形にしてください。クロッパーには1:1のプリセットがあり、1回に1つのファイル（最大10 MB）を受け入れ、損失のあるフォーマットをハードコーディングされた品質92で再エンコードします。クロップするのではなくリサイズしたい場合は、リサイズツールが25、50、75のパーセントプリセットを持ち、カバー、コンテイン、ストレッチフィットモードがあります。
ICOをPNGに戻すにはどうすればよいですか？
ICO to PNGを使用します。コンテナを解析し、ディレクトリエントリを歩き、最大幅のものを保持し、それをPNGとして書き出します。上記の4.6 KBファイルを指定すると、48x48の画像が得られます。なぜなら、48がそこにパックされている最大のものだからです。ファイルに存在しなかった詳細を復元することはできません。もっと大きなものが必要な場合は、アップスケーラーがブラウザ内でReal-ESRGANを実行し、常にPNGを出力します。私たちのsmall.pngテストは400x269で、2x設定で800x538として戻ってきました。再構築または単純な補間が適切なツールかどうかはアイコンの目的によります。知っておく価値があるのは、モデルは内部で4xのみを生成するため、2xはその後適用されるダウンスケールです。私たちのコンバーターは11のフォーマットで24のペアをカバーし、それらのいずれにもICOを書き出しません。アイコンはアイコンジェネレーターから来ます。
196 KBのアイコンは大きすぎますか？
それはandroid-chrome-512x512.pngであり、セットの中で最も重いものです。誰かがあなたのサイトをアプリとしてインストールするときに取得されます。これはW3C Web App Manifest仕様が管理するものであり、通常のページロードのクリティカルパスには存在しません。それでも縮小できます。私たちの圧縮ツールは、まったく異なる2つのPNGモードを提供します：「PNG no compression」はoxipngをレベル3で実行し、ロスレスのままにしますが、「PNG smaller file size」はimagequantで256色のパレットに量子化します。alpha.pngでは、ソースで942.4 KB、ロスレスパスで383.9 KB、パレットパスで98.3 KBが得られました。フラットなロゴは通常、256色で誰にも気づかれずに生き残ります。圧縮はすべてのメタデータ、EXIFおよびICCを含むすべての断片を削除します。アイコンにとっては、まさにそれが望ましいことです。
具体的な次のステップはこれです。アイコンジェネレーターを開き、持っている最大の正方形のソースをドロップします（JPEG、PNG、WebP、AVIF、GIF、SVGを最大10 MBまで1ファイル受け入れます）、背景色をブランドの16進数に設定し、マージンを0のままにして生成します。4つのリンクタグを`<head>`にコピーし、favicon.icoをウェブルートにアップロードすれば完了です。何もあなたのマシンから出ていないことを確認したい場合は、実行中にネットワークタブを監視するか、プライバシーページを読んでください。7つのファイルがサーバー上のどこに属するかは、別途詳しく説明されています。