Posted at

Android で apple-touch-icon が反映されない場合の確認ポイント

More than 5 years have passed since last update.


概要

Android の Chrome で「ホーム画面に追加」を実行した場合に表示されるアイコンが


sample

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


で指定している画像にならない場合に確認すべきポイントを列挙します。


留意点


アイコンファイル名を固定する

iOS の場合は link rel が無くても、ルート直下に /apple-touch-icon.png および /apple-touch-icon-precomposed.png があればそれを使うとのこと。ただルート直下に画像を置けるケースもそれほど多くないと思われる(特に Rails で assets precompile したりとか)のであんまり使う機会は無いかもしれない。


こんな指定も OK らしい

rel に両方書く(apple-touch-icon-precomposed が無効な場合でも apple-touch-icon が有効になる)。


head

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



確認点


1. 画像サイズが大きい

png の画像サイズがやたらに大きいと shortcut icon の方を見に行ってしまう気がする。Retina 版 iPad でも 152x152px が最大値なのでおそらくそれ以下にしないとダメ。


2. href に http:// を含むフルパスが含まれていない

今のところこれに遭遇してはいないのですが一応記載しておきます。


head

<link rel="apple-touch-icon-precomposed" href="http://www.your-awesome-website.jp/path/to/apple-touch-icon-precomposed.png" />



3. アクセス先に BASIC/Digest 認証がかかってる

これも遭遇はしていないです。機種によって差異があるらしい。