ICOファイルとは?アイコンサイズ、favicon、ICOを使用するタイミング
ICOコンテナ形式、保持するサイズ、faviconとデスクトップアイコンに依然として重要な理由を理解します
今すぐ変換ICOファイルとは?
ICOファイルは、Windowsの初期にMicrosoftによって作成された画像形式です。単一の解像度で単一の画像を保存するJPEGやPNGとは異なり、ICOファイルは1つのファイル内に異なるサイズと色深度で複数の画像を保持できるコンテナです。オペレーティングシステムまたはブラウザがアイコンを表示する必要がある場合、ICO内にバンドルされたセットから最適な画像を選択します。
このコンテナアプローチは実際の問題を解決します。小さな16ピクセルのタブアイコンと256ピクセルのデスクトップショートカットには、非常に異なるレベルの詳細が必要であり、単一の画像を拡大または縮小してもクリーンな結果が得られることはめったにありません。16、32、48、64、128、256ピクセルで専用のバージョンを埋め込むことにより、ICO形式により、各コンテキストがランタイムサイズ変更アーティファクトなしでシャープでピクセルパーフェクトなアイコンを表示できます。
内部的には、ICOファイルに保存された各画像は、BMPビットマップまたはPNG圧縮フレームとしてエンコードできます。最新のICOファイルは通常、ファイルサイズを管理しやすく保つために大きいサイズ(128 px以上)にPNG圧縮を使用しますが、小さいサイズはレガシーシステムとの最大の互換性のために非圧縮BMPデータとして残る場合があります。ファイルヘッダーは、いくつの画像が含まれているか、どの寸法であるかをコンシューミングアプリケーションに伝えるため、適切なバリアントが自動的に選択されます。
ICO vs PNG:実際にICOが必要なのはいつ?
PNGがウェブ上でデフォルトの画像形式になったため、ICOがまだ関連しているかどうかを尋ねるのは公平です。短い答え:はい、ただし特定の状況でのみです。以下の表は、主な違いをまとめています。
| 機能 | ICO | PNG |
|---|---|---|
| 1つのファイルに複数のサイズ | はい | いいえ(ファイルごとに1つの画像) |
| ブラウザfaviconサポート | 普遍的(すべてのブラウザ) | 最新のブラウザのみ |
| Windowsデスクトップアイコン | 必須 | サポートされていません |
| macOS / Linuxアプリアイコン | 使用されていません | 優先 |
| 透明度 | はい(アルファチャネル) | はい(アルファチャネル) |
| ファイルサイズ効率 | 大きい(複数の画像) | 小さい(単一画像) |
faviconの場合、PNGfaviconを認識しないInternet Explorerの古いバージョンを含むすべてのブラウザをサポートする必要がある場合、ICOは最も安全な選択のままです。サイトルートに配置されたfavicon.icoは、これまでに出荷されたほぼすべてのブラウザによって自動的に検出されます。最新のブラウザのみをターゲットにする場合、<link>タグを介して宣言されたPNG faviconは問題なく機能しますが、ICOフォールバックを追加するコストはほぼゼロです。
Windowsデスクトップおよびタスクバーアイコンの場合、ICOは唯一受け入れられる形式です。実行可能ファイル(.exe)はアイコンをICOリソースとして埋め込み、ショートカットファイル(.lnk)はICOファイルを直接参照します。Windowsアプリケーションをビルドまたはテーマにしている場合、ICOは譲れません。
macOSとLinuxでは、ICOは一般的に使用されません。macOSはICNSファイルとPNGに依存し、ほとんどのLinuxデスクトップ環境はSVGまたはPNGを受け付けます。したがって、オーディエンスがこれらのプラットフォームのみにいる場合、ICOを完全にスキップできます。
一般的なICOサイズとその用途
すべてのサイズが同じ目的を果たすわけではありません。以下の表は、各標準ICO寸法を典型的な使用にマップし、含めるべきかどうかの推奨事項とともに示しています。
| サイズ(px) | 使用される場所 | 推奨事項 |
|---|---|---|
| 16 × 16 | ブラウザタブ、アドレスバー、ブックマークメニュー | 常に含める |
| 32 × 32 | Windowsタスクバー、高DPI画面の新しいブラウザタブ | 常に含める |
| 48 × 48 | Windowsデスクトップアイコン(標準ビュー)、Windowsエクスプローラーリストビュー | デスクトップ使用のために含める |
| 64 × 64 | 一部のWindows UIコンテキスト、高DPIタスクバー | オプションだが有用 |
| 128 × 128 | Windows大きなアイコンビュー、一部のドック | シャープな大きなアイコンのために含める |
| 256 × 256 | Windows特大アイコンビュー、高DPIディスプレイ | 最高品質のために含める |
faviconのみのICOの場合、必須サイズは16と32ピクセルです。48ピクセルを追加すると、サイトにリンクするWindowsデスクトップショートカットがカバーされます。どのfaviconサイズが最も重要かの詳細については、faviconサイズ説明に関するガイドをご覧ください。
Windowsアプリケーションアイコンの場合、16から256までの全範囲を含める必要があります。256ピクセルバリアントは、Windowsが非常に大きなサイズでデスクトップアイコンをレンダリングする可能性がある最新の高DPIモニターで特に重要です。それをスキップすると、OSは小さい画像をアップスケールし、ぼやけたまたはピクセル化された結果を生成します。
任意の画像からICOファイルを作成する方法
ICOファイルの作成には、以前は専用のデスクトップソフトウェアが必要でしたが、最新のブラウザベースのツールによりプロセスが高速で簡単になりました。Any2ICOは、各最大10 MBのPNG、JPG、WebP、GIF、BMP、AVIF、SVGソース画像を受け付け、適切に構造化されたマルチサイズICOファイルを数秒で生成します。
クイックワークフローは次のとおりです。
- ソース画像を選択します。利用可能な最高解像度から始めます。512ピクセル以上のソースは、コンバーターにすべてのターゲットサイズでクリーンなダウンスケールされたバージョンを生成するのに十分な詳細を提供します。
- サイズを選択します。必要なサイズを選択:16、32、48、64、128、256。任意の組み合わせを選択できます。
- スケーリングと背景オプションを設定します。contain(アスペクト比を保持しながら画像を正方形内に収める)またはcover(正方形を埋め、エッジをクロップ)を選択します。パディング領域に透明または白の背景を選択します。
- 変換してダウンロードします。Any2ICOは、選択したサイズを単一のICOファイルにバンドルします。複数のソース画像を変換する場合、すべてを一度にZIPアーカイブでダウンロードできます。
変換全体は、Canvas APIを使用してブラウザで行われます。デバイスからインポートするファイルは処理のためにサーバー経由で送信されますが、永続的に保存されません。クリップボードから貼り付ける場合、そのデータはマシンを離れません。
ステップバイステップのfaviconチュートリアルについては、favicon.icoの作成方法に関するガイドをご覧ください。
重要なポイント
ICO形式は何十年も前のものですが、2つのコアユースケース:faviconとWindowsアイコンに不可欠なままです。単一のファイルに複数の解像度をバンドルする機能により、16ピクセルのブラウザタブから256ピクセルのデスクトップショートカットまで、すべてのディスプレイコンテキストがシャープで専用の画像を取得することが保証されます。
独自のICOを作成する準備ができたら、これらの原則を覚えておいてください。高解像度ソースから始め、少なくとも16、32、256ピクセルを含め、適用するサイズとスケーリングオプションを正確に制御できるAny2ICOのようなツールを使用します。faviconに適したサイズの選択の詳細については、faviconサイズの説明をお読みください。