favicon.ico にはどのサイズを入れるべき?
16・32・48 px この 3 つでブラウザのタブ、Alt-Tab の切り替え画面、デスクトップを賄え、1995 年から推奨されてきた組み合わせです。256 px を足すのは、アイコンが大アイコン表示でも通用する必要がある場合だけで構いません。
PNG・JPG・SVG・WebP を本物のマルチサイズ .ico に変換します。16・32・48 px を 1 ファイルにまとめ、アルファチャンネルは完全に保持。内部を PNG で持つか非圧縮 BMP で持つかを選べ、両方のファイルサイズを並べて表示します。.ico を開き直して各サイズを PNG で取り出すこともできます。
画像をここにドロップするか、クリックして選択
PNG、JPG、SVG、WebP、GIF、BMP · 最大 10 MB
どちらも .ico の内部で有効です。PNG は Vista 以降の Windows と現行のすべてのブラウザが読めます。一方、20 サイトを抽出して見つかった本物の ICO ファイル 14 個のうち 13 個は非圧縮 BMP でした。ImageMagick が既定でそちらに変換するためです。
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" type="image/svg+xml" href="/icon.svg"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
.ico ファイルをここにドロップするか、クリックして選択
ファイル内の各サイズを個別に一覧表示します
| オフセット | バイト数 | フィールド | 値 |
|---|---|---|---|
| 0 | 2 | idReserved | 0 |
| 2 | 2 | idType | 1 |
| 4 | 2 | idCount | 3 |
| 6 | 1 | bWidth[0] | 16 → 16 |
| 7 | 1 | bHeight[0] | 16 → 16 |
| 8 | 1 | bColorCount[0] | 0 |
| 9 | 1 | bReserved[0] | 0 |
| 10 | 2 | wPlanes[0] | 1 |
| 12 | 2 | wBitCount[0] | 32 |
| 14 | 4 | dwBytesInRes[0] | 248 |
| 18 | 4 | dwImageOffset[0] | 54 |
| 22 | 1 | bWidth[1] | 32 → 32 |
| 23 | 1 | bHeight[1] | 32 → 32 |
| 24 | 1 | bColorCount[1] | 0 |
| 25 | 1 | bReserved[1] | 0 |
| 26 | 2 | wPlanes[1] | 1 |
| 28 | 2 | wBitCount[1] | 32 |
| 30 | 4 | dwBytesInRes[1] | 720 |
| 34 | 4 | dwImageOffset[1] | 302 |
| 38 | 1 | bWidth[2] | 48 → 48 |
| 39 | 1 | bHeight[2] | 48 → 48 |
| 40 | 1 | bColorCount[2] | 0 |
| 41 | 1 | bReserved[2] | 0 |
| 42 | 2 | wPlanes[2] | 1 |
| 44 | 2 | wBitCount[2] | 32 |
| 46 | 4 | dwBytesInRes[2] | 1464 |
| 50 | 4 | dwImageOffset[2] | 1022 |
Go Tools の変換系ツールを作っている開発者が執筆・レビューしています。ここに書かれたコンテナの構造、バイト数、失敗の形は、他人がこの形式についてまとめた要約ではなく、書面のドメインレビューに基づいています。
16・32・48 px この 3 つでブラウザのタブ、Alt-Tab の切り替え画面、デスクトップを賄え、1995 年から推奨されてきた組み合わせです。256 px を足すのは、アイコンが大アイコン表示でも通用する必要がある場合だけで構いません。
入れられます。そのためのフォーマットです このフォーマットはコンテナです。6 バイトのヘッダー、画像 1 枚につき 16 バイトのディレクトリエントリ、その後に画像が続きます。どれも別々に描かれた絵であり、良いアイコンが 16 px でもくっきりしているのはそのためです。
正しく行えば失われません .ico の内部で画像を保存する 2 通りの方法は、どちらも 8 ビットのアルファチャンネルを完全な形で保持します。透過が失われるのは、ツールがアルファバイトを空のままにしたり、古いソフトが代わりに読む 1 ビットマスクを落としたりしたときだけです。
非圧縮で 264 KB、PNG なら数 KB 非圧縮の 256 px レイヤーはちょうど 270,376 バイトです。ヘッダー 40 バイト、ピクセル 262,144 バイト、マスク 8,192 バイトで、絵が何であっても変わりません。同じレイヤーを PNG で保存すれば、通常は数 KB で済みます。
.ico は画像フォーマットというより、画像を束ねた小さなアーカイブです。先頭 6 バイトのヘッダーが中の画像の枚数を示し、続いて画像 1 枚につき 16 バイトのディレクトリエントリが並んで幅・高さ・バイト数・ファイル内の位置を伝え、その後ろに画像データ本体が置かれます。各画像の保存方法は 2 通りで、完全な PNG ファイルをまるごと埋め込むか、1 ビットの透過マスクを下にくっつけた非圧縮の Windows ビットマップにするかのどちらかです。
この設計があるからこそ、1 つのファビコンがブラウザのタブでは 16 px で、ファイルマネージャーでは 48 px で、どちらもくっきり見えます。サイズごとに手を入れて描き分けた別々の絵であって、1 枚の画像を拡大縮小しているわけではないからです。同時に、この設計がいくつかの意外な性質も生みました。辺の長さは 1 バイトで格納されるため 256 は 0 と書かれ、512 はそもそも書けません。さらにディレクトリが各エントリのサイズを記録し、画像データ自身も同じサイズを記録するため、両者が食い違うことがあり、しかもソフトによってどちらを信じるかが違います。
$ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
$ python3 -c "from PIL import Image; print(sorted(Image.open('favicon.ico').ico.sizes()))"
[(16, 16), (32, 32), (48, 48)] 既定は 16・32・48 px で、最大 256 px まで。各サイズは上のレイヤーから縮小するのではなく、元画像からフル品質で個別に描き起こすため、小さいサイズが大きいサイズのぼけを受け継ぐことがありません。
コンテナ内部で許される 2 つのペイロード形式はトレードオフが大きく異なるのに、どちらを書いているかに触れる変換ツールはほとんどありません。ここではスイッチとして用意し、それぞれの結果のファイルサイズも表示するので、勘ではなく数字で決められます。
アルファチャンネルは完全な形で書き込み、古いソフトが代わりに読む 1 ビットマスクも空のままにせずアルファから導出します。このマスクを空にすることが、マスクしか読まない環境で透過アイコンが黒い四角に化ける原因です。
逆方向のタブは、.ico の中にある画像を実サイズ・保存形式・ビット深度・透過の出どころとともにすべて一覧します。いくつかの有名なファビコンが今も使っているパレット方式のビットマップも含めて表示します。ブラウザが見せてくれるのはそのうち 1 枚だけです。
ディレクトリが主張するサイズと画像データが一致しない場合、その旨を表示します。Firefox が捨ててしまう埋め込み PNG も指摘します。Firefox の ICO デコーダーは 8 ビットの RGB または RGBA しか受け付けないため、パレットやグレースケールのレイヤーは Firefox でだけ消えてしまい、ほかのブラウザではすべて正常に表示されます。どちらもアイコンがあるプログラムでは表示され別のプログラムでは空白になる、よくある原因ですが、他の変換ツールはどちらも報告しません。
読み込みもリサイズもパッキングも、すべてこのページの中で完結します。ファイルがサーバーに届かないので、後から消すものも、待たされる順番もありません。
magick in.png -define icon:auto-resize=48,32,16 favicon.ico 定番の答えであり、これほど多くのファビコンが非圧縮である理由でもあります。256 px 以外のすべてのレイヤーを詰め込む前にビットマップへ変換するため、3 サイズで数百バイトではなく 15 KB 前後になります。サイズは大きい順に書き込まれます。
img.save('favicon.ico', sizes=[(16,16),(32,32),(48,48)]) PNG を埋め込むため、同じ 3 サイズがおよそ 10 分の 1 の容量に収まります。Pillow は ICO の読み取りも得意で、Image.open(f).ico.sizes() が中身を一覧してくれるので、他人のファイルを確認するのに便利です。
npx png-to-ico icon.png > favicon.ico 1 つ以上の PNG を受け取って PNG ペイロードとして詰める、単機能のコマンドラインツールです。ビルドスクリプトに組み込むには手軽ですが、リサイズはしてくれないので、各サイズをそれぞれのファイルとして自分で用意します。
sharp(input).resize(32).png() 個々の PNG を作るには非常に優れていますが、ICO コンテナは書けないため、通常は上のいずれかのパッカーと組み合わせます。ビルドパイプラインが既に sharp で統一されている場合に、よく混乱のもとになるところです。
github.com/Kodeworks/golang-image-ico image.Image から画像 1 枚の ICO を書き出します。単一サイズのファビコンには十分ですが、複数サイズを 1 つのコンテナに詰めるならディレクトリを自分で書くことになり、およそ 30 行の作業です。
.rc リソーススクリプト、rc.exe アプリケーションのアイコンを作る通常の方法です。コンパイラが .ico を実行ファイルのリソースセクションに埋め込みます。その中にあるコンテナは、ウェブのファビコンとまったく同じ形式です。
.ico 画像の各レイヤーを 1 つのアイコンサイズとして書き出し、圧縮 PNG を含めてレイヤーごとにビット深度を選べます。この選択を黙って決めるのではなく見せてくれる、数少ないグラフィカルツールの 1 つです。
sips -s format ico in.png --out favicon.ico macOS にも ICO の書き出しは実はあります。sips --formats は com.microsoft.ico を書き込み可として挙げており、上のコマンドは実際に有効なファイルを生成しました。できないのは複数サイズのパックで、出力は 48×48 の 1 枚だけでした。検索結果がよく勧める iconutil のほうは Apple 独自のコンテナである .icns を出力し、Windows もブラウザも読めません。
$ xxd -l 38 favicon.ico
00000000: 0000 0100 0300 1010 0000 0100 2000 e903 ............ ... 00000010: 0000 3600 0000 2020 0000 0100 2000 6c05 ..6... .... .l. 00000020: 0000 1f04 0000 ......
0000 は予約フィールド、0100 はタイプ 1(カーソルではなくアイコン)、0300 は画像が 3 枚あることを示します。続くのが最初の 16 バイトのディレクトリエントリです。10 10 は 16×16、00 は色数、00 は予約、0100 はプレーン数 1、2000 は 1 ピクセルあたり 32 ビット、e903 0000 はペイロードが 1,001 バイトであること、3600 0000 はその位置が 54 であることを表します。54 はちょうど 6 + 3 × 16、つまりディレクトリの終端です。1 バイトで持つサイズを除き、複数バイトの数値はすべてリトルエンディアンです。
bWidth = 0x00 bHeight = 0x00
256 × 256
ディレクトリは辺の長さを 1 バイトずつしか持たないため、表せる最大値は 255 で、0 が 256 を意味すると定められています。このページのどこにも 512 px がないのも同じ理由です。512 を表せるバイトが存在しません。それでも 512 px を用意しているオンライン変換サービスは少なくなく、自分では記述できないディレクトリエントリの後ろに 512 px の画像を書き込んでいます。
16 + 32 + 48 px, PNG payloads 16 + 32 + 48 px, uncompressed BMP payloads
389 bytes 15,086 bytes
非圧縮ペイロードのコストは 40 + 幅 × 高さ × 4 バイトに 1 ビットのマスクを加えたもので、寸法だけで決まり、絵の内容には一切左右されません。まったく別のアイコンを配信している 3 つのサイトが、1 バイトも違わない長さのファイルを配ることになり得るのはこのためです。
$ magick logo.png -define icon:auto-resize=48,32,16 favicon.ico $ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 48x48, 32 bits/pixel, 32x32, 32 bits/pixel
ImageMagick は 256 px を除くすべてのレイヤーを非圧縮ビットマップに変換してから詰め込むため、出力は数百バイトではなく 15 KB 前後になります。Pillow は逆に PNG を埋め込みます:Image.open('logo.png').save('favicon.ico', sizes=[(16,16),(32,32),(48,48)])。
$ magick favicon.ico favicon-%d.png
favicon-0.png 48×48 favicon-1.png 32×32 favicon-2.png 16×16
これはブラウザが代行してくれる作業ではありません。マルチサイズの .ico を <img> タグに渡しても、サイズがどの順で並んでいようと返ってくる画像はただ 1 枚、最大のものだけです。ファイルの中身を実際に一覧するにはコンテナを自分で解析するしかなく、それが「ICO → PNG」タブのしていることです。
PNG、JPG、SVG、WebP、GIF、BMP に対応し、上限は 10 MB です。ファイルがブラウザの外に出ることはありません。File API で読み込み、すべてのピクセルはローカルの canvas に描画されます。
最初は 16・32・48 px が選択されています。大アイコン表示や高 DPI のデスクトップでも通用させたいなら 64・128・256 を追加してください。選んだ最大サイズより元画像が小さい場合、黙って引き伸ばすのではなくページ上で明示します。
既定は PNG です。ファイルサイズが 1 桁小さく、現行のブラウザすべてと Vista 以降の Windows が読めるためです。実際に配信されているファビコンの多くが取っている形が欲しければ非圧縮 BMP に切り替えてください。2 つのファイルサイズは並べて表示されます。
.ico を保存し、マークアップが必要なら「link タグをコピー」ボタンを使ってください。ルートの /favicon.ico は今もフォールバックとして機能しますが、ブラウザが最初に試すよう定められているのは明示的な link 要素のほうです。
256 px の画像に対応するディレクトリのバイトは 0 でなければなりません。255 と書くのは無害な 1 つずれに見えて、一部のブラウザが黙って描画を拒むファイルを生みます。
bWidth = 0xFF bHeight = 0xFF ; 256 のつもりで書いた「255」
bWidth = 0x00 bHeight = 0x00 ; 0 が 256 を意味すると定義されている
ディレクトリエントリが 16×16 と言っているのにペイロードは実際 32×32 という場合、デコーダは二手に分かれます。ディレクトリを信じて何も描かないものと、ペイロードを信じて問題なく描画するものです。結果としてそのファイルは、あるマシンでは動き、別のマシンでは見えません。
entry: 16×16 payload IHDR: 32×32
entry: 32×32 payload IHDR: 32×32
非圧縮レイヤーの内部では、高さがカラーデータとマスクの両方を含みます。素の高さを書くと、あるデコーダでは空白として表示され、別のデコーダでは画像の下半分として表示されるファイルになり、どちらもエラーを出しません。
biHeight = 32 ; 32 px の画像の場合
biHeight = 64 ; 2 × 32、カラーデータとマスクの合計
マスクだけを埋めてアルファバイトをすべて 0 のままにするツールがあります。あるデコーダはこれを完全に透明な画像と読んでアイコンが消え、別のデコーダはマスクにフォールバックして正しく表示します。両方を矛盾なく書いておけば、この論争ごと避けられます。
alpha bytes: all 0x00 mask: all 0x00
alpha bytes: real values mask: set where alpha < 128
SVG 内部の外部参照はラスタライズ時にブロックされ、しかも何も報告されません。エラーは発生せず、canvas も読み取り可能なままです。画像が壊れたときのプレースホルダーが、そのままアイコンに焼き込まれます。変換する前に図形をインライン化してください。
<image href="https://cdn.example.com/logo.png"/>
<image href="data:image/png;base64,iVBORw0KGgo…"/>
00 00 の予約、アイコンを表す 01 00(02 00 はカーソルファイル)、続いて 2 バイトの枚数です。各ディレクトリエントリは幅・高さ・パレットサイズ・予約バイトが 1 バイトずつ、その後に 2 バイトのプレーン数とビット深度、最後にペイロードの長さと位置を示す 4 バイトのフィールドが 2 つ並びます。複数バイトのものはすべてリトルエンディアンです。ceil(幅 ÷ 32) × 4 バイトを足します。したがって 16 px のレイヤーは 1,128 バイト、48 px は 9,640 バイト、256 px は 270,376 バイトで、絵が何であるかとは無関係です。この固定コストがあるために、無関係な 3 つのサイトがバイト単位で同じ長さのファビコンを配信し得ますし、このページが 256 px のレイヤーをペイロードが PNG のときだけ提供している理由でもあります。image/vnd.microsoft.icon は 2003 年 9 月に IANA へ登録され、そこが挙げている参考文献は 1995 年のマイクロソフトの記事「Icons in Win32」です。ICO の仕様として広く引用されている RFC 2361 は、実際には「WAVE and AVI Codec Registries」という題で、画像については一言も触れていません。magick logo.png -define icon:auto-resize=48,32,16 favicon.ico です。 単位変換
無料オンライン進数変換ツール。2進数、8進数、10進数、16進数および任意の基数(2-36)間で数値を瞬時に変換。BigInt対応で桁数制限なし。登録不要・サーバー送信なし、すべての処理がブラウザ内で完結。コピーボタンやコードリテラル出力で開発作業を効率化。
単位変換
符号付き10進数を入力すると、符号絶対値表現・1の補数・2の補数・ゲタばき表現を4〜64ビットで同時に算出します。ビット列や16進バイトを貼り付ければ、同じパターンの5通りの読み方を並べて確認できます。8ビットの−128に符号絶対値表現と1の補数が存在しないことも明示。すべてブラウザ内で処理、無料、登録不要。
単位変換
Linux のファイル権限(パーミッション)を8進数(755・644)と rwx 記号で相互変換する無料計算ツール。chmod コマンドを自動生成し、chmod 755 の意味や 777 の危険な設定もひと目で確認。すべてブラウザ内で完結します。
単位変換
HEX を RGB、HSL、OKLCH、OKLAB、CMYK にブラウザで変換できます。任意の形式をワンクリックでコピー。無料・登録不要・色データはページから一切送信されません。
単位変換
HEX カラーを CMYK にブラウザで変換できます。印刷プレビュー向けの sRGB ベースの単純な近似値です。無料・登録不要、色データはローカルから出ません。
単位変換
任意の HEX カラーを HSL にブラウザで変換できます。3 桁・6 桁・アルファ付き 8 桁の HEX すべてに対応。無料・即時・登録不要、色データはページから一切送信されません。