Windows ICOファイル:マルチサイズアイコン、透明度、一般的な落とし穴

ICO形式は、何十年もの間Windowsアイコンシステムのバックボーンでした。Windowsデスクトップ上のすべての実行可能ファイル、ショートカット、フォルダー、タスクバーボタンは、ICOファイルに依存して、ユーザーが1日に数十回やり取りする小さな画像を表示します。新しい画像形式の台頭にもかかわらず、ICOはWindowsアプリケーションアイコン、デスクトップショートカット、古いブラウザに提供されるfaviconの必須標準のままです。

ICOをユニークにするのは、単一のファイルに異なるサイズと色深度で複数の画像を含めることができることです。Windowsがアイコンを表示する必要がある場合、現在のコンテキストに最適に一致する画像をICOファイルで検索します。タスクバーアイコンは16x16ピクセル画像を要求する可能性がありますが、150% DPIスケーリングのデスクトップショートカットは48x48または64x64バージョンさえ必要とする場合があります。正確なサイズがファイルに存在する場合、Windowsはそれを直接使用します。そうでない場合、最も近い利用可能なサイズをスケーリングしますが、これはほとんど常にぼやけた、柔らかい、またはギザギザのレンダリングになります。

この記事では、Windowsがアイコンサイズを選択する方法、マルチサイズICOファイルがよりシャープな結果を生成する理由、形式で透明度がどのように機能するか、アイコンがぼやけた、クロップされた、またはプロフェッショナルでないように見える一般的な間違いについて説明します。最後までに、どのサイズを含めるか、展開する前にICOファイルをテストする方法を正確に知ることができます。

透明度と背景

最新のICOファイルは完全な32ビットRGBA透明度をサポートしています。つまり、各ピクセルは完全に不透明、完全に透明、またはその間の任意の場所(半透明)にすることができます。これは、デスクトップ壁紙、タスクバー、エクスプローラーウィンドウ、通知エリアなど、さまざまな背景色の上に表示されるため、アイコンには不可欠です。

ソース画像に透明な背景がある場合(透明なPNG上のロゴなど)、ICOファイルはその透明度を保持します。Windowsは、表示される表面の上にアイコンを合成し、結果はクリーンでプロフェッショナルに見えます。ソース画像に単色の背景がある場合、その背景はアイコンの一部になり、デザインの後ろに見える長方形として表示されます。これは通常、実際にはアマチュアに見えます。

注意すべき2つの一般的な透明度の落とし穴があります。まず、JPEGソース画像には透明度がありません。JPGをICOに変換する場合、結果のアイコンには単色の長方形の背景があります。透明なアイコンを取得するには、すでに透明な背景を持つPNG、WebP、またはSVGソースから始めるか、変換前に画像エディターを使用して背景を削除してください。次に、半透明のエッジが特定の背景に対してフリンジとして表示される場合があります。ソース画像がアンチエイリアスされたエッジで白い背景に対してデザインされた場合、これらの半透明のエッジピクセルは暗い背景に表示されるときに白いハローを示す場合があります。最もクリーンなアプローチは、最初から透明度を念頭に置いてアイコンをデザインすることです。

Any2ICOでは、ICOファイルを生成するときに透明な背景と白い背景を選択できます。ほとんどのユースケースでは、透明が正しい選択です。白い背景は、透明度を正しく処理しない特定のレガシーアプリケーションなど、単色の背景が特に必要な場合に役立ちます。

一般的な落とし穴とそれらを回避する方法

適切なサイズが含まれている場合でも、ソース画像または変換設定が適切でない場合、アイコンは間違って見える可能性があります。開発者とデザイナーが遭遇する最も頻繁な問題と、それぞれを修正する方法を次に示します。

ぼやけたアイコン:ぼやけたアイコンの第一の原因は、サイズレイヤーの欠落です。Windowsが256x256画像を16x16にスケールダウンする必要がある場合、結果は泥だらけの塊です。修正は、Windowsがスケーリングする必要がないように、すべての標準サイズを含めることです。2番目に一般的な原因は、低解像度のソース画像です。ソースが64x64ピクセルのみで、コンバーターに256x256レイヤーを生成するように要求する場合、アップスケールする必要があり、常に柔らかさを生成します。常に利用可能な最高解像度ソースから始めてください。完全なウォークスルーについては、専用のぼやけたICOトラブルシューティングガイドをお読みください。

クロップまたはカットオフされたエッジ:これは、スケーリングモードがソース画像の比率と一致しない場合に発生します。ソース画像が長方形でICOサイズが正方形の場合、コンバーターは正方形を埋めるために画像をクロップするか(coverモード)、画像全体を正方形内に収め、2つの側面に空のスペースを残すか(containモード)のいずれかを選択する必要があります。画像全体を保持したい場合はcontainを選択し、すべてのエッジを表示するよりも完全な正方形を埋めることが重要な場合はcoverを選択してください。

ギザギザまたはピクセル化されたエッジ:16x16のような非常に小さいサイズでは、アンチエイリアシングが機能する余地がほとんどありません。細い線、細かいテキスト、または詳細なイラストを含む複雑な形状は、詳細を表すのに十分なピクセルがないため、ギザギザに見えます。解決策は、小さいサイズでアイコンデザインを簡素化することです。多くのプロフェッショナルなアイコンセットは、16x16レイヤーにロゴマークの簡略化されたバージョンを使用します。

高DPI画面でアイコンが異なって見える:Windowsは、基本アイコンサイズを掛けるDPIスケーリング(125%、150%、200%など)を適用します。150%スケーリングでの32x32アイコンには48x48画像が必要です。ICOファイルから48x48が欠落している場合、Windowsは32x32レイヤーを150%スケールアップし、柔らかいエッジを生成します。48x48、64x64、128x128レイヤーを含めると、これらの中間スケーリング係数がキャッチされます。

実用的なテスト:ICOファイルの検証

ICOファイルを生成した後、展開する前にいくつかの実際のWindowsコンテキストでテストする必要があります。最も一般的な問題をキャッチする簡単なテストチェックリストを次に示します。

ステップ1:すべてのエクスプローラービューモードを確認します。デスクトップまたはファイルエクスプローラーフォルダーを右クリックして、小さなアイコン、中程度のアイコン、大きなアイコン、特大アイコンビューを切り替えます。アイコンがすべてのサイズでシャープで認識可能に見えることを確認してください。256x256レイヤーを使用する特大ビューに特に注意してください。

ステップ2:タスクバーにピン留めします。ICOがアプリケーション用の場合、ショートカットをタスクバーにピン留めして、デフォルトのタスクバーサイズで正しく見えることを確認します。また、タスクバーとは異なるサイズを使用するALT+TABアプリケーションスイッチャーでも確認してください。

ステップ3:さまざまなDPI設定でテストします。設定を開き、ディスプレイに移動して、スケール設定を変更します。一般的な値は100%、125%、150%、200%です。各スケーリングレベルで、デスクトップ、タスクバー、エクスプローラーでアイコンがシャープなままであることを確認してください。これは、欠落している中間サイズ(48、64、128)が最も目に見える場所です。

ステップ4:さまざまな背景に対して透明度を確認します。壁紙の明るい領域と暗い領域の上にデスクトップショートカットアイコンを移動します。白いフリンジ、暗いハロー、または目に見える長方形の背景を探します。アーティファクトが表示される場合、ソース画像は、透明でない背景に対してブレンドされたエッジピクセルを持っていた可能性があります。

ブラウザで画像がどのように処理されるかを含む、Any2ICOが内部でどのように機能するかの詳細については、Aboutページにアクセスしてください。ICO形式自体の完全な概要については、ICOとは?ガイドをご覧ください。