ファイル形式
ICOとは？アイコンファイルとファビコンの基本
ICOは、1つのファイルに複数のサイズを持てるWindowsのアイコン形式です。その構造、ファビコンの歴史、今必要なサイズを解説します。
著者: Hemen Dönüştür Editör Ekibi公開日: 10 分で読めます
ICOは、Windowsがプログラムやフォルダーのアイコンに、Webがブラウザーのタブに表示される小さなサイトのアイコン（ファビコン）に使っている形式です。他の画像形式と違うのは、1つのファイルに同じアイコンの複数のサイズを入れられる点です。この記事では、ICOファイルの内部構造、Windowsのバージョンを通じた変遷、ファビコンの歴史、今必要なサイズ、ICOファイルを正しく作る方法を説明します。
ICOとは
ICO（拡張子.ico）は、Microsoftがアイコンのリソース用に定めたコンテナ形式です。ICOファイルは「アイコンディレクトリ」で始まり、ファイル内のすべての画像（たとえば16x16、32x32、48x48ピクセル）を個別の項目として一覧にしています。Windowsやブラウザーは、アイコンを表示する場所に最も合うサイズを選びます。
IANAに登録された正式なMIMEタイプはimage/vnd.microsoft.iconですが、Microsoftのソフトウェアや多くのサーバーは今もimage/x-iconを使っています。マウスカーソル用のCUR形式はほぼ同じで、ディレクトリの種類のフィールドに1ではなく2を使い、カーソルのクリック位置（ホットスポット）を記録します。
歴史：Windowsのアイコンからファビコンまで
- Windows 1.0：アイコンは白黒でした。
- Windows 3.0：今日知られている、複数の画像を持つディレクトリベースの構造が登場しました。
- 1995年：ジョン・ホーニックによるMicrosoftの記事「Icons」がICOの構造を詳しく文書化し、開発者に少なくとも16x16（16色）、32x32（16色）、48x48（256色）の画像を含めるよう勧めました。
- 1999年3月：Internet Explorer 5が、ファビコンに対応した最初のブラウザーになりました。サイトのルートにある
favicon.icoファイルが、お気に入りやアドレスバーに表示されました。 - Windows XP：32ビットの画像に8ビットのアルファチャンネルが加わり、やわらかい半透明の輪郭が可能になりました。
- Windows Vista：256x256の画像と、ICO内でのPNG圧縮が加わりました。
- 2003年：
image/vnd.microsoft.iconというMIMEタイプが、第三者によってIANAに申請されました。
ICOファイルの構造
アイコンディレクトリ（ICONDIR）
ファイルは6バイトのヘッダーで始まります。予約フィールド（0）、種類（アイコンは1、カーソルは2）、画像の数です。その後に、画像ごとに16バイトのディレクトリ項目が続きます。
ディレクトリ項目（ICONDIRENTRY）
| フィールド | 意味 |
|---|---|
| bWidth、bHeight | 幅と高さ（各1バイト）。0は256ピクセルを意味します。 |
| bColorCount | パレットの色数（8ビット以上では0） |
| wPlanes、wBitCount | カラープレーンと1ピクセルあたりのビット数 |
| dwBytesInRes | 画像データのバイト数 |
| dwImageOffset | ファイル内で画像データが始まる位置 |
サイズのフィールドが1バイトなので、ICO内の画像は最大256x256ピクセルです。
画像データ：BMPかPNG
従来のICOでは、各画像はファイルヘッダーのないBMP（DIB）です。ホーニックの記事によれば、カラー画像（XORマスク）の後に1ビットの透明マスク（ANDマスク）が続きます。そのためヘッダーに記録される高さは両方のマスクを合わせた高さで、実際の高さの2倍になります。Windows XP以降、32ビットの画像はアルファチャンネルをピクセルデータに直接持っています。
Windows Vista以降は、項目をBMPの代わりに完全なPNGファイルにすることもできます。特に256x256のサイズでPNGを埋め込むと、ファイルがずっと小さくなります。MDNは、ICO内のPNGはVistaより前には対応しておらず、古いソフトでは問題になることがあると指摘していますが、現在のブラウザーとWindowsはどちらの種類も読み込めます。
必要なサイズは？
Windowsアプリのアイコン
Microsoftの現在のアプリアイコンのガイドラインでは、Win32アプリには少なくとも16x16、24x24、32x32、48x48、256x256を含めるべきだとしています。ぴったり合うサイズがなければ、Windowsは次に大きいサイズを縮小します。256ピクセルの画像があれば、アイコンは縮小されるだけで拡大されることはありません。たとえば100%の拡大率では、タイトルバーとコンテキストメニューは16ピクセル、タスクバーは24ピクセルを使い、200%ではそれぞれ32と48になります。
Webサイトのファビコン
Webでは事情が違います。HTML Standardでは、ページにrel="icon"のリンクがない場合、ブラウザーはサイトのルートから/favicon.icoを要求してもよいとされています。そのため、ルートにfavicon.icoを置いておくのは今もよい習慣ですが、それだけでは足りません。
- Google検索は、8x8ピクセル以上の正方形（1:1）のファビコンを求め、さまざまな場所できれいに見えるよう48x48より大きいものを推奨しています。
- iPhoneとiPadのホーム画面は、180x180の
apple-touch-iconを使います。 - AndroidとPWAは、Webアプリマニフェストに192ピクセルと512ピクセルのアイコン、さらにアダプティブアイコン用の「maskable」版を求めます。
- 現在のブラウザーはSVGのファビコンにも対応しており、1つのベクターファイルですべてのサイズをまかなえます。
実際には、favicon.icoに16、32、48ピクセルを入れておけばデスクトップのブラウザーや古いシステムをカバーでき、大きなサイズは別のPNGファイルとして用意します。
システム、ブラウザー、ソフトの対応
WindowsはICOをネイティブに読み書きでき、エクスプローラー、ショートカット、デスクトップはどれもICOを扱います。MDNによれば、Chrome、Edge、Firefox、Opera、SafariはICOファイルを表示できます。macOSはアプリのアイコンに独自のICNS形式を使いますが、プレビューでICOを開けます。GIMPなどの編集ソフトは、ICOをサイズごとに1枚のレイヤーを持つファイルとして開きます。MDNは一般的なWebコンテンツでのICOの使用を勧めておらず、ファビコンは<link>要素を使ったPNGに移行してきていると述べています。
長所と短所
| 長所 | 短所 |
|---|---|
| 1つのファイルに複数のサイズと色深度 | 最大256x256ピクセル |
| Windowsでは広く対応 | Webではファビコン以外に使い道がない |
| アルファチャンネルとPNG圧縮（Vista以降） | 古いBMPベースの項目は大きく扱いにくい |
| ブラウザーがルートのfavicon.icoを自動で探す | 専用のツールが必要で、どのソフトでも書き出せるわけではない |
よくあるトラブルと対処法
PNGの拡張子を.icoに変えるだけではだめ？
一部のブラウザーは許容しますが、本物のICOではありません。アイコンディレクトリがなく、Windowsはアイコンとして受け付けません。正しい方法は、画像を本物のICOに変換することです。当サイトのPNGからICOへの変換とJPGからICOへの変換は、常に16、32、48ピクセルの正方形を書き出し、画像が十分大きければ64、128、256ピクセルも加えます。各サイズはPNGとして埋め込まれるので、透明も保たれます。
ファビコンがぼやける、または判読できない
細い線や小さな文字は、16ピクセルでは消えてしまいます。太く、コントラストが高く、シンプルなマークを使いましょう。必要なら、ロゴのシンボル部分だけを使います。少なくとも256x256、できれば512x512ピクセルの正方形の元画像が最もよい結果になります。
正方形でない画像がつぶれたり伸びたりする
アイコンは正方形です。当サイトのツールは画像を引き伸ばさず、比率を保ったまま正方形の中央に配置し、余白を透明にします。完全な正方形にしたいなら、先に画像トリミングで正方形の部分を切り出してください。
新しいファビコンが表示されない
ブラウザーはファビコンを長い間キャッシュします。ファイル名を変えるかバージョンのパラメーター（/favicon.ico?v=2）を付け、サーバーが正しいMIMEタイプを返しているか確認すれば、たいてい直ります。Google検索結果のアイコンは、サイトが再クロールされてから更新されます。
Windowsで古いアイコンのまま表示される
Windowsはアイコンを別のキャッシュに保存しています。アプリをビルドし直してショートカットを作り直すか、サインアウトしてサインインし直せば十分なことがよくあります。
変換のコツ
- Webサイトには1つのICOでは足りません：ファビコン作成ツールは、favicon.ico（16、32、48ピクセル）、favicon-48x48.png、apple-touch-icon.png（180ピクセル）、icon-192.png、icon-512.png、maskable用のicon-512-maskable.png、site.webmanifestを一度に作り、元画像がSVGならicon.svgも加えます。ページの
<head>に貼り付けるコードも表示されます。 - Appleのアイコンには不透明な背景が必要です：iOSは透明な部分を黒で表示し、角は自分で丸めるため、ファビコン作成ツールはapple-touch-iconを選んだ背景色で塗りつぶします。
- ロゴがSVGなら：SVGからPNGへの変換で大きなPNGを描画してからICOに変換するか、SVGをそのままファビコン作成ツールに渡してください。
当サイトのICOとファビコンのツールはブラウザー内で動作します。画像はアップロードされず、端末の外に出ることはありません。
よくある質問
ICOの画像の最大サイズは？
ディレクトリ項目の幅と高さのフィールドはそれぞれ1バイトで、0は256を意味します。そのため、ICO内の1つの画像は最大256x256ピクセルです。
ファビコンにはICOとPNGのどちらを使うべきですか？
両方です。16、32、48ピクセルを入れたルートのfavicon.icoは古いブラウザーや自動の要求に対応し、現在のブラウザーやモバイル端末向けには<link>タグでPNG（必要ならSVGも）のアイコンを指定します。
ICOは透明に対応していますか？
はい。古いICOは1ビットのマスクを使い、Windows XP以降の32ビット画像は完全なアルファチャンネルを持ち、Vista以降は埋め込みPNGが透明を持っています。
ICOファイルをPNGに変換するには？
ICOを画像変換ツールに追加し、変換先にPNGを選んでください。ファイルに複数のサイズが入っている場合は、最も大きいものが使われます。
MacでICOファイルは使われますか？
macOSはアプリのアイコンにICNS形式を使います。Webサイトなら、favicon.icoとPNGのアイコンはどのOSのブラウザーでも使えます。
