ホーム画面/Webクリップアイコン

on めもらんだむ Web

スマートフォンでWebページをホーム画面に登録したり、Windows 8.xでタイル画面にWebクリップをピン留めするときに使われるアイコンの設定方法に関するメモ。

    iOSの場合

    iOSの場合、特に何もしていなければホーム画面登録時に以下のファイルをサーバのドキュメントルートへ探しに行く。

    |ファイル名|表示サイズ|クライアント|
|apple-touch-icon-152x152.png|152px|Retina版のiPad、iPad mini用、iOS 7以降|
|apple-touch-icon-144x144.png|144px|Retina版のiPad、iPad mini用、iOS 6以前|
|apple-touch-icon-120x120.png|120px|Retina版のiPhone、iPod touch用、iOS 7以降|
|apple-touch-icon-114x114.png|114px|Retina版のiPhone、iPod touch用、iOS 6以前|
|apple-touch-icon-76x76.png|76px|非Retina版のiPad 2、iPad miniの用、iOS 7以降|
|apple-touch-icon-72x72.png|72px|非Retina版のiPad 2、iPad miniの用、iOS 6以前|
|apple-touch-icon.png|57px/60px|デフォルト|

    iOS7未満ではグローエフェクトをバイパスする-precomposed付きのapple-touch-icon-precomposed.png等も探しに行くようになっていたが、iOS7以降は廃止された。1

    真面目にアイコンを用意しようとするとこれらを全部用意しなければならないが、サーバに404 File not foundエラーログが残ることを気にしないならばapple-touch-icon.pngさえ存在していれば実用上の問題はない。

    もともとの画像サイズの規定値は上記の通りだが、サイズが合ってなければ自動的にリサイズされるし、また使用されている大多数のiOSデバイスは既にRetinaディスプレイ化されているため、生真面目に最小公倍数で作成する必要も取り立ててない。ざっくり512pxや600pxあたりで作画してしまってもよいだろう。

    その他気を付けるべきこととして以下の制約がある。

    • 画像ファイルは標準的な24bit PNG形式とする。
    • True Color 形式とし、Indexカラーにしてはならない。
    • インタレース化してはいけない。リサイズによって表示が乱れる。
    • SSLは問題ないが、クライアント認証に対応していない。
    • Expires等で有効期限が指示されている場合、期限が切れると自動的に再アクセス・再生成される。ファイルサイズが大きいと処理の重さが気になるかもしれない。

    Androidの場合

    Android系の場合、Webクリップ画像についてはiOSに準じたものでよい。それを<head>セクション内の<link>要素で指定することができる。

    <link rel="apple-touch-icon" href="apple-touch-icon.png"/>  
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"/>  
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"/>  
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"/>  
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"/>  
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"/>  
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"/>

    <sizes>属性で優先するアイコンサイズを指定することができるが、これは機種やAndroidバージョンによって千差万別2となるため「これは必須」と明言することができない。従ってこれもアバウトに大きめのサイズをひとつ用意するのが実利的だろう。

    Windowsタイル画面へのピン留め

    Windows8.x では（正確にはInternet Explorer 11の機能）スタートタイル画面にWebクリップを貼ろうとすると、デフォルトではまずドキュメントルートのbrowserconfig.xmlを探しに行く。このブラウザ構成ファイルのフォーマットは次のようになっている。

    <?xml version="1.0" encoding="utf-8"?>  
<browserconfig>  
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

    このカスタム構成ファイルは<head>中の<meta>要素で明示的に指定することができる。

    <meta name="msapplication-config" content="ieconfig.xml" />

    このカスタム構成ファイルが見つからない場合は、通常のFaviconがタイル画像として採用される。

    使用される画像のサイズは下表のとおりだが、ワイドサイズのみ長方形でそれ以外は正方形として規定されている。

    |タイルのサイズ|標準のタイルのサイズ|最小画像サイズ|推奨される画像のサイズ|
|:-|:-:|:-:|:-:|
|小サイズ|70 x 70|56 x 56|128 x 128|
|普通サイズ|150 x 150|120 x 120|270 x 270|
|ワイドサイズ|310 x 150|248 x 120|558 x 270|
|大サイズ|310 x 310|248 x 248|558 x 558|

    カスタム構成ファイルには画像更新間隔や通知テキストを追記することもでき、ウェザーサイトのように一定時間間隔で画像を書き換えさせることもできる。詳しくはMSDNの該当ページを参照されたい。3

    1. iOS7以降はフラットデザインとなったため、角丸処理の他は行う必要がなくなったことで廃止された。 ↩

    2. 環境によっては画像URLは絶対パスで指定しないと正常認識されないケースもあるようだ。 ↩

    3. https://msdn.microsoft.com/ja-jp/library/dn455106(v=vs.85).aspx ↩

    on めもらんだむ Web
    RECENT LINKS