とあるWebデザイナーの逆引き辞典Plus

Apple Touch Icon ( apple-touch-icon ) を Android にも設定したい

16:06

Apple Touch Iconsのhtmlおよび画像の設定は下記のように設定するのが良いでしょう。

例）アイコンの画像を/sp/common/img/ディレクトリに置いた場合の記述例

●html

<link href="/sp/common/img/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">

●iconを置く場所

ルートディレクトリにapple-touch-icon.pngまたは

apple-touch-icon-precomposed.png

というファイル名でアイコンを置けば、iOS機器では、上記link要素のタグの記述は不要です（自動でapple-touch-iconを認識してくれます）

ただし、Androidでは、アイコンを正しく置くだけでは不十分で、上記link要素のタグの記述が必要になります。

なので、アイコンへのパスは必ず書く必要があり、ルートにiconを設置するメリットもなくなりますので、ルートがごちゃごちゃしないよう、わかりやすい場所にアイコンを置き、link要素のhref属性でパスを指定してあげればOKです。

◇href属性は、フルパスでないとアイコンを認識しない？

また、 href属性はhttp://からはじまるフルパスでないとAndroid機器ではアイコンを認識しない、という報告もあるようですが、いったんフルパスでのURL指定はせず、/から始まる絶対指定としています（サーバーネームに合わせ随時変更するのは大変なため）。もし本番にアップしてみてアイコンが表示されない等あった場合は、http://からはじまるフルパスでの絶対URL指定を試してみるのがよいかと思います。

●rel属性

Android2.1と2.2両方に対応させるにはこのprecomposedというオプションがあるほうで指定する必要がありますので、このような記述にしております。android2.2以降のみ対応でよければ、rel="apple-touch-icon"でもよいようです。

参考サイト

http://www.ravelrumba.com/blog/android-apple-touch-icon/

英語の記事なので、ざっと要約すると、以下のようになります。

■iOS機器では・・・

・ルートディレクトリに“apple-touch-icon.png”というファイル名でアイコンを置いておくと自動でアイコンを認識する（正しくルートにこのファイル名が入っていれば上記

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

のタグによるアイコンの指定は不要）

・このapple-touch-iconはファビコンと同様の働きをする

■Android2.2では・・・

・ルートディレクトリに正しいファイル名でアイコンを置くだけでは十分ではない

（<link href="/apple-touch-icon-precomposed.png"rel="apple-touch-icon-precomposed">の記述が必要）

○検証方法・・・apple公式サイトで試してみる

この記事で、検証方法としてAndroid2.2端末でAppleのサイト（http://www.apple.com/）にアクセスして試す方法が挙げられています。

アップルのサイトのソースを見ると、確かに

<link rel="apple-touch-icon-precomposed"〜>

の指定はありませんが、ルートにapple-touch-icon

http://www.apple.com/apple-touch-icon.png

とfavicon

http://www.apple.com/favicon.ico

の二つのファイルが置かれております。

◎訳注：Android2.1,2.2,2.3で試してみましたが、アンドロイド端末ではすべてfavicon.icoがショートカット作成時のアイコンとして設定されました。なので、favicon.icoはルートディレクトリに置かないほうがよいかと思います。

■Android2.1

・Android 2.1でApple Touch iconに対応するためにはlink要素のrel属性にapple-touch-icon-precomposedオプションを使う必要がある。

→Android2.2では、link要素のrel属性にapple-touch-iconもしくはapple-touch-icon-precomposedのいずれかを設定する必要がある→Android2.1とAndroid2.2の両方でapple-touch-iconを設定するには"precomposed"のオプションをつける（apple-touch-icon-precomposedとする）必要がある

・相対URLによる指定ではAndroid端末ではapple-touch-iconをを認識しないだろうとレポートする人もいるようだ

（しかしこの記事の筆者のエミュレータでの検証ではこの事象は現れなかった）