PNGからICOへ
PNGからICOへは、1枚の画像を、複数サイズ同時収めのWindowsアイコンファイルに変換します。タブ、タスクバー、デスクトップのどこでも、シャープな版が使われます。出力は引き伸ばしではなく、16、32、48、256ピクセルを1ファイルに収めた本物のマルチサイズ.ico。ブラウザ内で処理され、アップロードは不要です。
正方形のPNGをドロップするか、クリックして選択
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式： PNG, JPG, JPEG, WebP, AVIF, HEIC
PNGからICOへはどう動きますか？
.icoは画像形式ではありません。実体はディレクトリです。ヘッダーがあり、画像ごとに16バイトのエントリが1つ並び、その後に画像本体が続きます。OSはディレクトリを読み、必要なサイズに合うエントリを選びます。ブラウザタブなら16ピクセル、タスクバーなら32、Explorerの「中アイコン」表示なら48、高DPIのデスクトップなら256です。
単一サイズでは正解にならない理由
「ICOに変換」系のツールのほとんどは、32×32か256×256の画像を1枚だけ出します。32ピクセルのアイコン1枚を256で表示するのは、32ピクセルの絵を8倍に引き伸ばすことであり、それこそ誰もが目に留め、しかし正体を言い当てられないぼやけたfaviconです。256ピクセルのアイコン1枚を16で表示するのはさらに悪く、ブラウザは手持ちのフィルタで縮小するため、細い線は灰色の中に消えてしまいます。
ここでは各エントリを、大きな縮小版からの再サンプリングではなく、元のピクセルからそれぞれの出力サイズで直接描画しています。16ピクセルではこれが重要です。1ピクセルの線の有無が、判読できるマークとにじみの分かれ目になります。
PNG entries、およびそれだけでは足りない唯一の場面
この形式は当初、デバイス非依存のビットマップを格納していました。Windows Vista以降は、エントリを完全なPNGファイルにできるようになり、ここでもその形で書き込みます。より小さく、透過を保ち、ビットマップエンコーダも不要です。Windows 10と11、すべてのブラウザ、そしてmacOS独自のツールがこれを読みます。
例外も明記しておく価値があります。非常に古いWindowsシェルやレガシーなインストーラーは、小さいサイズにビットマップエントリを期待することがあります。アイコンの行き先がVista以前に作られたものなら、これは理論上ではなく現実の制限です。
良い元画像の条件
正方形で、少なくとも256×256、そして色つきのタブ帯に載せるなら、白背景ではなく透過が前提です。シルエットのしっかりしたマークなら16ピクセルでも読めます。細い線、グラデーション、小さい文字は読めず、解像度を上げても解決しません。だからこそ、まず見るべきは上の16ピクセルのプレビューです。
元画像
logo.png — 1024×1024, transparent
favicon.ico
16×16 PNG entry 1.1 KB
32×32 PNG entry 2.4 KB
48×48 PNG entry 4.0 KB
256×256 PNG entry 18.2 KB
——————
25.7 KB in one filePNGからICOへが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 16 × 16 | サイズ | オン | ブラウザのタブとブックマークバー用。最も仕上げが難しく、最もよく目にするサイズです。ほかのどれより先に、このプレビューを確認してください。 |
| 24 × 24 | サイズ | オフ | 100%スケーリングのWindowsタスクバー用。32ピクセルのエントリがほぼ同じ用途をカバーし、エントリは1つごとにファイルサイズを消費するため、デフォルトではオフです。 |
| 32 × 32 | サイズ | オン | WindowsタスクバーのショートカットとmacOSのFinder用。単一サイズしか出力しない変換ツールのほとんどが選ぶサイズで、「1サイズで足りる」ように見えて、足りなくなる理由でもあります。 |
| 48 × 48 | サイズ | オン | Windows Explorerの「中アイコン」表示、および標準ディスプレイでデスクトップショートカットが使うサイズ。 |
| 64 × 64 | サイズ | オフ | Windowsの「大アイコン」と一部のLinuxドック用。含めても容量はわずかで、必要性は低いサイズです。 |
| 128 × 128 | サイズ | オフ | macOSのDock、およびWindowsの高DPIショートカット一覧用。 |
| 256 × 256 | サイズ | オン | Windowsの「特大アイコン」と、インストーラーが表示するサムネイル用。このサイズは慣例でPNGエントリとして格納され、ここでもその通りにされます。 |
| エントリ形式 | PNG | 常時 | ICOに内包するPNG。Windows Vista以降でサポートされ、すべてのブラウザとmacOSが読み込みます。Vista以前のシェルは、小さいサイズについて代わりにビットマップエントリを期待することがあります。 |
| 透過 | 保持 | はい | アルファチャンネルはどのサイズでも保持されるため、アイコンは背後に白い箱を残さず、色つきのタブ帯の上にそのまま載ります。 |
| 元画像の上限 | bytes | 100 MB | すべてタブ内で処理されるため、これを超えるファイルは試みるのではなく拒否されます。256ピクセル以上の正方形の元画像があれば、ツールには十分です。 |
よくある質問
ブラウザタブでfaviconがぼやけて見えるのはなぜですか？
ファイルに1サイズしか入っておらず、タブが求めているのは16ピクセルだからです。32ピクセル1枚だけのアイコンを16で表示すると、ブラウザが縮小して細部が失われます。256ピクセル1枚ならさらにひどく、縮小の際に細い線が完全に消えます。マルチサイズの.icoなら、ブラウザが実際に必要なサイズで描かれたエントリを選べます。それがこの形式の存在意義です。
どのサイズを含めるべきですか？
実用上は16、32、48、256ですべてまかなえ、このツールがデフォルトで選ぶのもこの組み合わせです。24、64、128を追加すると特定のスケーリング率で役立ちますが、それぞれ数KBを消費します。256ピクセルのエントリは、外したくなっても残すべき1つです。Windowsは特大アイコンやインストーラーにこれを使い、これがないことが一部のショートカットに汎用アイコンが表示される原因です。
.icoはブラウザでも機能しますか？それともWindows専用ですか？
両方で機能します。どのブラウザもfaviconとして.icoを読み込み、表示するのは中に入っているPNGエントリです。macOSも読めます。`sips`もFinderも対応しています。PNG-in-ICOで問題を起こしたことのある環境は、Vistaより古いWindowsシェルだけです。だからこそ参照表は、ユニバーサル対応を謳う代わりにその旨を明記しているのです。
PNGのfaviconとWebマニフェストも用意すべきですか？
はい。ただし理由は別々です。180×180のPNG faviconは、サイトがホーム画面に追加されたときにiOSが使うものです。192と512ピクセルのPNGを含むWebマニフェストは、Androidが使うものです。.icoはデスクトップブラウザとWindowsを、そのほかはモバイルをカバーします。補い合う関係であり、代替品ではありません。
元画像が正方形ではありません。どうなりますか？
正方形になるよう中央でトリミングされます。ICOのエントリは定義上すべて正方形であり、エントリごとにwidthとheightのフィールドが1つずつあり、同じ数値として書き込まれるためです。関心のある部分が中央にない場合は、画像トリミングツールで先に意図的に切り抜いてください。
画像はアップロードされますか？
いいえ。デコード、リサイズ、アイコンの組み立ては、すべてこのタブ内で行われます。ファイルをドロップしても、ネットワークパネルには何も表示されません。思ったより重要な点です。faviconにされる画像は、まだ公開前のロゴであることが多いのです。