Finder/Explorerのアイコン表示

MacOSの.icnsファイルもWindowsの.icoファイルも復数のアイコンリソースを含むマルチ解像度対応画像アーカイブだといえる。ではどんな状況でどの解像度のアイコン画像が選択されるのかを調べてみた。


    OSX(Marvericks/Yosemite)の場合

    まずはOSXでの話。テスト用には前掲【OSX用アイコンファイルをWindows上で作る】mkosxicns.plを使ってmultisize.icnsという.icnsファイルを作成した。これには以下のアイコンが含まれている。

    これをファインダーで表示したりアプリケーションアイコンに設定したりしてみる。OSXはMarvericksとYosemiteを使用したがどちらも結果は変わらなかった。

    |表示サイズ|状況|
    |:-:|:-|
    |16x16|リスト表示<br>カラム表示<br>デスクトップ/アイコン表示(最小)|
    |32x32|デスクトップ/アイコン表示(17〜32)|
    |32x32@2x<br>(64x64)|デスクトップ/アイコン表示(サイズ33〜64)|
    |128x128|デスクトップ(最大)<br>アイコン表示(65〜128)|
    |256x256|アイコン表示(129〜256)<br>Cover Flow(最小〜256)|
    |512x512|アイコン表示(257〜512)<br>Cover Flow(257〜512)|
    |512x512@2x<br>(1024x1024)|プレビュー<br>Cover Flow(513〜最大)|
    

    .icnsファイルはマルチ解像度なので必要な場面でもっとも適切な解像度のアイコンが自動的に選択される。その結果7種類の画像サイズすべてが何らかの形で出現した。Retina用@2xについても特別扱いしている様子はない。またプレビューについては常に使用可能な最大解像度が選択されるがこれはプレビューの性質からして妥当だろう。


    アプリアイコン(OSX)

    |表示サイズ|Retina(HiDPI)|状況|
    |:-:|:-:|:-|
    |16x16|16x16@2x<br>(32x32)|リスト表示<br>カラム表示<br>デスクトップ/アイコン表示(最小)|
    |32x32|32x32@2x<br>(64x64)|デスクトップ/アイコン表示(17〜32)|
    |128x128|128x128@2x<br>(256x256)|ドックアイコン<br>デスクトップ(33〜最大)<br>アイコン表示(33〜128)|
    |256x256|256x256@2x<br>(512x512)|アイコン表示(129〜256)<br>Cover Flow(最小〜256)<br>プレビュー|
    |512x512|512x512@2x<br>(1024x1024)|アイコン表示(257〜512)<br>Cover Flow(257〜最大)|
    

    一方この.icnsファイルをアプリアイコンに設定した場合、同一リソースなのに使用されるファイルが5種類になる。つまり標準解像度ではRetina用アイコンが、Retina環境では標準解像度アイコンが選択されない。そしてこの5種類の中に64x64の等倍は含まれていないので、その上の128x128が使用されるようになるのだ。このため.icnsファイルと並べると、ファインダー設定のアイコン表示サイズによっては見映えが変わったり両者が混在して表示されたりする。


    Windows 8.1 Updateの場合

    次はWindowsでの話。こちらもOSX版と同様にマルチ解像度のマルチサイズ.icoファイルを用意した。これは以下の35種類のアイコンサイズに対応する。1

    .icoファイルの場合、収録可能な最大のアイコンサイズは256x256に制限される。一方で縦横サイズは任意に指定でき、実は正方形ではない長方形画像2も登録できる。また画像形式もVista以降はαチャンネル付透過True Color PNGフォーマットが使用できるようになった。ただしPNG形式アイコンでは表示に不具合がでる場面もあるため、旧来のDIB形式の.icoファイル multisizedib.icoと、PNG形式だけを集めた multisizepng.icoの2種類を用意した。

    Windowsのアイコンの扱いについてはMSDNの該当ページ3が一次資料となるが、Explorerでは基本的には以下のようになる。

    |96dpi<br>100%|120dpi<br>125%|144dpi<br>150%|192dpi<br>200%|状況|
    |16x16|←|←|←|タスクバー(小・実行アプリ)<br>ウィンドウタイトル|
    |16x16|20x20|24x24|32x32|タスクバー(小・ピン留め・ショートカット)<br>リストアイテム<br>Explorer(小)|
    |32x32|←|←|←|タスクバー(中・実行アプリ)<br>ダイアログアイコン|
    |32x32|40x40|48x48|64x64|タスクバー(中・ピン留め・ショートカット)<br>Explorer(コンテンツ)|
    |48x48|60x60|72x72|96x96|Explorer(中・並べて表示)|
    |256x256|←|←|←|Explorer(大・特大)|
    

    このうちアプリケーションを直接起動した場合のウィンドウタイトル・タスクバー・ダイアログアイコンについてはコントロールパネルのテキストとその他の項目の大きさ設定にかかわりなく常に16x16と32x32に固定4される。またExplorer(大・特大)表示については原則として.icoファイルに収録された最大サイズのものがアイコンプレビューに選ばれる。

    アプリケーションでもショートカットやピン留めから起動した場合、タスクバーアイコンについてはショートカットに登録されたアイコンが使用され、その場合はマルチ解像度が有効になる。


    Windows 10 Tecnical Preview の場合

    ところで、Windows10はまだ開発中ということもあるが、TP版にはタスクバーのアイコン表示に問題が有る。少なくとも以下の2点が判明している。

    • タスクバー設定が標準の場合、アイコン表示サイズが実サイズの75%に縮小される。(32x32->24x24、48x48->36x36)
      ただしタスクバー表示が小アイコン設定の場合の16x16表示には問題がない。
    • ショートカット・ピン留めでPNG形式アイコンを使用した場合、マスクプレーン(透過色切り抜き)が2ピクセル右にずれる。
      96dpi
      120dpi
      左がアプリケーション直接、右がショートカットから起動した場合でいずれもPNG形式アイコンだが、右のものには黒いゴミが付いている。これはアイコンを角丸にするためのマスクプレーン(PNG画像のαチャンネル)がずれて重ねられているためだ。DBI形式の場合はこのようにはならない。5

    iOSアプリ用アイコンの場合

    iOSの場合、使われる場面によってアイコンサイズが決められているため、用意する面倒を無視すれば悩む要素はない。ただしその規定サイズはiOSのバージョンによって異なり、マルチバージョン対応とする場合は当然準備しなければならない数が増える。以下はその対応一覧表だ。概ねホーム画面・設定画面・Spotlight検索6の3場面各々に標準解像度とRetina解像度が必要になる。iOS8の場合さらに大画面iPhone用の3倍精度が追加された。

    |サイズ|iOS6|iOS7|iOS8|主な用途|
    |:-|:-:|:-:|:-:|:-|
    |29x29|◯|◯|◯|iPhone Spotlight(6)<br>iPhone設定(6)<br>iPad設定(78)|
    |29x29@2x|◯|◯|◯|iPhone設定(67)<br>iPad設定(78)|
    |29x29@3x|✕|✕|◯|iPhone設定(8)|
    |40x40@2x|✕|◯|✕|iPhone Spotlight(7)|
    |40x40@3x|✕|✕|◯|iPhone Spotlight(8)|
    |50x50|◯|✕|✕|iPad Spotlight(6)<br>iPad設定(6)|
    |50x50@2x|◯|✕|✕|iPad Spotlight(6)<br>iPad設定(6)|
    |57x57|◯|✕|✕|iPhoneホーム(6)|
    |57x57@2x|◯|✕|✕|iPhoneホーム(6)|
    |60x60@2x|✕|◯|✕|iPhoneホーム(7)|
    |60x60@3x|✕|✕|◯|iPhoneホーム(8)|
    |72x72|◯|✕|✕|iPadホーム(6)|
    |72x72@2x|◯|✕|✕|iPadホーム(6)|
    |76x76|✕|◯|◯|iPadホーム(78)|
    |76x76@2|✕|◯|◯|iPadホーム(78)|
    |512x512@2|-|-|-|iTunes Store<br>App Store|
    

    ダウンロード


    1. 妙に半端なサイズがやたら沢山入っているのはFavicon調査用である。ほとんどOperaのせい。

    2. もっとも正方形以外のアイコンリソースを想定・対応している表示環境があるとは考え難いのだが。

    3. Icons https://msdn.microsoft.com/en-us/library/dn742485.aspx

    4. この性質から16x16と32x32についてはPNG形式アイコンよりはDIB形式アイコンのほうが推奨される。

    5. カスタム表示500%拡大までの全てでゴミが付くので160pxまではDBI形式アイコンにしないと見映えが落ちてしまう。当然DBI形式では透過マスクのアンチエイリアス効果を得られないため別の方向で高品位は得られない。

    6. 40x40と60x60の等倍スケールは使用されていないようだ。なおこの他にもUINavigationBar等で22x22の1〜3倍スケールがアプリ制作現場では必要になる。

    RECENT LINKS