apple touch icon の iOS & Android での表示確認と設定

公開日:

apple touch icon は結局どう設定すればいいの? それを考えるために、実際にどのように表示されるか所有デバイスで確認しました。

結果のみは、このページ最後のapple touch icon 設定まとめをどうぞ。

apple touch icon は、スマホ・タブレットを使って、ウェブサイトを「ホーム画面に追加」したときに使われるアイコン
ホーム画面に追加

apple touch icon がないと、トップページのサムネイル(縮小版)が表示される
サムネイルアイコン

各デバイスで使用されるサイズを確認

アイコン生成サイトのiconifier.netで、大きなサイズのPNG画像1つから、apple touch icon のサイズ違い8個と favicon を作成。各 apple touch icon は、どのサイズのものが使われているか確認するために、サイズを記入して再保存した。

apple touch icon と favicon.ico は、サイトのルートディレクトリに置いて、ヘッダ内の <link rel〜> の有り無しでどれが使われるか調べた。

apple touch icon のサイズ違い8個とfavicon.icoを準備。"a" は、57x57 ピクセル
icons

<link rel〜>は、iconifier.net による生成データに添付されていた iconifier-readme.txt より転記。

 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.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">

所有タブレットの結果

ホーム画面に使われた apple-touch-icon の大きさ
デバイス OS version link rel〜 無し link rel〜 有り
iPod touch 5
(iPhone 5 と同等)
iOS 8.1.2 120 x 120
iPad(1st) iOS 5.1.1 72 x 72
iPad mini iOS 8.1.2 76 x 76
iPad Air 2 iOS 8.1.2 152 x 152
Nexus 9 Android 5.0.1 書類
なし
144x144
144
Webブラウザのブックマーク - favicon

iOS デバイスは、link rel〜文がなくても apple-touch-icon が表示されるが、Android は、link rel〜文がないと 書類アイコンになる。

apple-touch-icon を1つだけ使うとどうなる?

152 x 152ピクセルの "apple-touch-icon.png" を1つだけ指定した。

"apple-touch-icon-152x152.png" を "apple-touch-icon.png" にリネームしてアップロード
apple touch icon

faviconなし

 <link rel="apple-touch-icon" href="/apple-touch-icon.png">

結果

152x152ピクセルの apple-touch-icon をルートディレクトリに置いておくだけで、iOSデバイスは高画質のアイコンが表示できる。ただし、Nexus 9 の場合は、書類アイコンになった。

上記の「Nexus 9 の場合は、書類アイコン」なのは、Nexus 9 で表示できる大きさが、144x144までのため。152x152では大きすぎるので書類アイコンになる。144x144ピクセル以下の apple-touch-icon なら、下記の「Nexus 9 で表示される条件を探る」と同じになると思われる。

Nexus 9 で表示される条件を探る

ウェブサイトを「ホーム画面に追加」したときに、Nexus 9 で表示される apple-touch-icon を条件別に調べた。

apple-touch-icon.png をアップロード

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

a-書類アイコン←Nexus 9 に表示されたアイコン(以下同じ)

apple-touch-icon-57x57.png をアップロード

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">

57-書類アイコン

apple-touch-icon-72x72.png をアップロード

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">

72

76x76 〜 144x144は、上記と同じでアイコン表示

apple-touch-icon-152x152.png をアップロード

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

書類アイコン

apple-touch-icon-72x72.png と
apple-touch-icon-120x120.png をアップロード

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

120
大きい方が使われる

apple-touch-icon-72x72.png と
apple-touch-icon-152x152.png をアップロード

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

72
152x152 は使われない

apple-touch-icon-152x152.png をアップロード

<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-152x152.png">

書類アイコン
sizes="" に実際とは違う値を記入した。→sizesの数値は重要でない(実際の大きさで判断される)

apple-touch-icon-152x152.png を
apple-touch-icon-144x144.png にリネームしてアップロード

<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">

書類アイコン
ファイル名でなく実データで使用の可否を判断される

Nexus 9 の apple-touch-icon の表示で、わかったこと

  • link rel=文がないと、表示されない
  • Nexus 9は、実験で使用した中では、apple-touch-icon-144x144 が使用できる最大の大きさ
  • ファイル名ではなく、実データの大きさで使用の可否が決まる

Nexus 9 以外は Android デバイスを所有していないので検証ができていないが、iOS デバイスと同じように機器によって使用されるアイコンの大きさは違うのではないだろうか。

apple touch icon 設定まとめ

結局、はじめの結果と同じであるが、各デバイスで使われる複数の大きさの apple-touch-icon をサイトのルートディレクトリに置き、それに対応した link rel文を書いておく必要がある。ただし、iOS デバイスだけを対象とするなら、最大サイズの apple-touch-icon.png がひとつあれば良い(link rel文は不要)。

Nexus 9 が表示できる最大サイズ 144 x 144 の apple-touch-icon.png をルートに置いて link rel文を1行書いておくと、Nexus 9 + iOS は、OK。ただし、画面サイズの小さな Android デバイスでは、書類アイコンになる可能性がある。