スマートフォンのホーム画面設定でアイコンを指定する「apple-touch-icon」の書き方と注意点

  • あとで読みたい人は…

@cappeeです。

自分のサイトをiPhoneやiPadにある「ホーム画面」に設定してもらった場合、サイトのサムネイル画像ではなくきれいなアイコンで表示するには画像1枚とコード1行追加するだけで可能です。

iPhoneのみと紹介されているサイトも多いですが、Androidでも同じコードでアイコンを表示することができます。ただし、Androidは端末ごとで仕様が違いますので、アイコン表示に対応している機種のみということになります。

一番簡単なアイコンの指定方法

まず144 x 144px のアイコン用画像を作成します。角丸には自動的になりますので四角いままで作成して大丈夫です。

作成したアイコン画像は「apple-touch-icon」というファイル名にしてPNGでルートディレクトリなどに書き出します。

あとは、下記の1行をhead内に記述すればOKです。

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

光沢も自動的についてしまうので、もし必要なければrelの部分に「-precomposed」を追加します。

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

補足

それぞれ端末(iOS)に合わせて異なるサイズの画像を用意して指定することも可能です。その場合は、57×57、72×72、114×114、144×144の4サイズの用意が必要になり、下記のように記述します。光沢をつけない場合も同じように最後に「-precomposed」を追加します。

<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">

最初にお伝えした一番簡単な方法は、この一番多いなサイズのみ用意して縮小させているわけです。

ディレクトリ

iOSでは「apple-touch-icon.png」という名前でルートディレクトリに入れておくと勝手に認識してくれますが、Androidの場合はlink要素での指定が必要になります。なので、管理しやすい場所に置いてlink指定すれば問題ないです。

注意点

今回私がはまってしまったのが「ベーシック認証」です。当たり前といえばそうなのですが、ベーシック認証がかかった状態でログインしたとしてもアイコンは正常に表示されませんのでご注意ください。

最初にも書きましたがAndroidに関しては端末の仕様によるのと、サイトのショートカットをつくる動線がわかりづらい端末も多くあまり需要がなさそうなのでそこで時間をかけないで割り切ることが重要かと思います。

【参考サイト】

Androidは「apple-touch-icon」でいろいろハマるので要注意
Apple Touch Icon ( apple-touch-icon ) を Android にも設定したい

 

Pocket
article clipper スマートフォンのホーム画面設定でアイコンを指定する「apple touch icon」の書き方と注意点

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>