アプリアイコン vs favicon:ICO vs PNGと各プラットフォームが期待するもの

アイコンは最新のソフトウェアのあらゆる場所にあります。ブラウザタブの小さな画像から電話のホーム画面の大きな正方形まで。表面上は似ているように見えますが、これらのアイコンは異なる目的を果たし、異なる形式ルールに従い、非常に異なるコンテキストで表示されます。それらを混同したり、間違った形式を使用したりすると、ぼやけたタブ、欠落しているブックマークアイコン、またはアプリストアの拒否につながります。

最も一般的な2つのカテゴリはfaviconとアプリアイコンです。favicon(「お気に入りアイコン」の略)は、ブラウザタブ、ブックマークリスト、ブラウザ履歴に表示される小さな画像です。アプリアイコンは、デスクトップまたはモバイルオペレーティングシステム上のネイティブアプリケーションを表す画像です。どちらも画像ファイルとして始まりますが、形式要件、サイズの期待、プラットフォームがそれらを発見して使用する方法が異なります。

この記事では、各タイプのアイコンが何であるか、ICO形式とPNGをいつ使用するべきか、主要なプラットフォームが実際に何を期待しているかを説明します。ウェブサイトを構築している場合でも、デスクトップアプリケーションをパッケージ化している場合でも、モバイルアプリを出荷している場合でも、提供する形式とサイズを正確に把握できます。

faviconとは?

faviconは、ウェブブラウザがウェブサイトと一緒に表示するアイコンです。ページタイトルの隣のブラウザタブ、ブックマークのリスト、ブラウザ履歴、場合によってはアドレスバーや検索結果に表示されます。この用語は、Internet Explorerの元の実装に由来しており、すべてのウェブサイトのルートディレクトリでfavicon.icoという名前のファイルを探していました。

歴史的に、faviconはICO形式である必要がありました。Internet Explorerはそれを必要としており、代替手段はありませんでした。ICO形式が単一のファイルに複数のサイズを埋め込む機能により、実用的な選択になりました。1つのファイルがタブ用の16x16画像とブックマークバー用の32x32画像を提供できました。最新のブラウザ(Chrome、Firefox、Safari、Edge)は現在、ページHTML内の<link>タグを介して指定されたPNG faviconも受け付けますが、明示的なリンクタグが存在しない場合、/favicon.icoにフォールバックします。

古いバージョンやクローラーを含むすべてのブラウザ全体での最大の互換性のために、ウェブサイトルートにfavicon.icoファイルを提供することは依然として最も安全なアプローチです。このICOファイルには、少なくとも16x16および32x32サイズを含める必要があります。多くの開発者は、高DPIブラウザタブ用に48x48も含めます。PNG形式を好むプラットフォーム用にPNGリンクタグでこれを補完できますが、ICOファイルは安全ネットとして機能します。

アプリアイコンとは?

アプリアイコンは、オペレーティングシステムのインターフェイス内のネイティブアプリケーションを表します。Windowsでは、デスクトップ、タスクバー、スタートメニュー、ALT+TABスイッチャーに表示されます。macOSでは、Dock、Launchpad、Finderに表示されます。iOSとAndroidでは、ホーム画面とアプリドロワーにスポットを占有します。各プラットフォームには、独自の形式要件とサイズ仕様があります。

Windowsは、アプリケーションアイコンにICO形式を使用します。Windows実行可能ファイル(.exe)は、オペレーティングシステムが読み取って表示するICOリソースを埋め込みます。このICOには、すべてのディスプレイコンテキストとDPIスケーリングレベルをカバーするために、16、32、48、64、128、256ピクセルのレイヤーを含める必要があります。ショートカット(.lnkファイル)は、外部ICOファイルを参照することもできます。

macOSは、Appleの独自のマルチ解像度アイコンコンテナであるICNS形式を使用します。ICNSファイルには、最大1024x1024ピクセルのサイズを含めることができます。ソース画像は通常、ビルドプロセス中にICNSバンドルにコンパイルされるPNGです。

iOSは、特定のサイズのPNG画像(2xおよび3xで60x60、iPadのバリエーション、SpotlightおよびSettings用)を必要とします。AppleはiOSアプリアイコンにICOまたはICNSを使用しません。画像は、プレーンPNGとしてアプリバンドルのアセットカタログに含まれています。

AndroidもPNGを使用し、通常、複数の密度(mdpiからxxxhdpi)でアダプティブアイコンレイヤー(フォアグラウンドとバックグラウンド)として提供されます。Play Storeアイコンは512x512 PNGです。

ウェブアプリ(PWA)は、manifest.jsonファイルで参照されるPNGアイコンを使用します。一般的なサイズは192x192と512x512です。これらのアイコンは、ユーザーがPWAをインストールするときにホーム画面に表示されます。

実用的なアドバイスと一般的な間違い

プラットフォーム全体でアイコンを正しく取得するには、見落としやすいいくつかの詳細に注意を払う必要があります。開発者が最もよく犯す間違いと、簡単な修正を次に示します。

すべてに単一のPNGに依存する:単一の512x512 PNGは一部のコンテキストで機能しますが、他のコンテキストでは失敗します。/favicon.icoを探すブラウザはそれを見つけられません。Windows実行可能ファイルは、PNGをアイコンリソースとして埋め込むことができません。faviconおよびWindowsユースケース用の専用ICOファイルを常に生成してください。PNGが主要なソース形式であっても同様です。

ICOファイルで1つのサイズのみを使用する:32x32のみのICOファイルは、ブラウザタブでは問題なく見えますが、Windowsエクスプローラーの大きなアイコンビューでぼやけた塊になります。常に複数のサイズを含めてください。完全なセット(16から256)は、すべてのディスプレイコンテキストにピクセルパーフェクトなレイヤーから描画するものがあることを保証します。

高DPIおよびRetinaディスプレイを忘れる:最新の画面は、標準ディスプレイの2〜3倍のピクセルをパックします。1080pモニターで問題なく見える16x16 faviconは、Retinaディスプレイでは小さく柔らかく見えます。32x32レイヤー(ブラウザが16pxタブスロットに2倍スケーリングで使用)と3倍スケーリングまたは高DPIタブ用の48x48レイヤーを含めてください。

プラットフォーム全体でテストしない:開発マシンで完璧に見えるアイコンは、別のOSまたはブラウザで完全に異なって見える場合があります。少なくともChrome、Firefox、Safari、Edgeでfaviconをテストしてください。デスクトップアプリを構築している場合は、100%、150%、200% DPIスケーリングでWindowsでICOをテストしてください。数分のテストにより、何時間ものユーザーの苦情が節約されます。

ICO形式とその構造の詳細、またはfaviconを特に作成するためのヘルプについては、favicon作成ガイドをご覧ください。