2015年版: ホームアイコンの指定方法まとめ
調べては忘れを毎回繰り返すのもなんだかなーと思ったので、まとめておきます。
ちなみに、iOS/Androidのことしか書きません。
iOSは5以上、Androidは4以上のOSバージョンを対象としてます。
OperaとかMetroとかFireFoxとかは知りません！もっと頑張ってください！
あくまでこの記事を投稿した時点でのものです！
Safari(iOS)
いちおう公式のドキュメントはこちら。
で、実は指定方法が2つありまして、
- HTMLで指定する方法(おそらく一般的)
- ドキュメントルートに画像を配置する方法
以下それぞれ。
HTMLで指定する場合
<link rel="apple-touch-icon" href="/path/to/icon.png">
ってrelで指定する。
解像度を指定する
<link rel="apple-touch-icon" sizes="76x76" href="/path/to/icon.png">
ってsizeを指定する。
指定がなければ、自動的に60x60として扱われる。
具体的なサイズは、
抜き出す。
| 端末 | サイズ(辺) |
|---|---|
| iPhone 6 Plus (@3x) | 180 |
| iPhone 6 and iPhone 5 (@2x) | 120 |
| iPhone 4s (@2x) | 120 |
| iPad and iPad mini (@2x) | 152 |
| iPad 2 and iPad mini (@1x) | 76 |
端末ごとに適合するサイズが決まっていて、その適合するサイズの指定がない場合は以下のように処理される。
- 適合するサイズより大きいもののうち、記述の中で最も小さいサイズの画像
- 適合するサイズより大きいものがない場合、記述の中で最も大きいサイズの画像
よしなにやってくれるってことです。
HTMLで指定しない場合
サーバーのドキュメントルートにある、apple-touch-icon*で始まるファイル名の画像を探しにいく。
もし適合するサイズが60の端末の場合、
らしい。
てかこっちのやり方でやってる人っているのかしら。
Chrome
公式ほい。
ちなみに、Chrome for Androidにしか、ホームに追加するメニューは無いらしい。
<link rel="icon" sizes="192x192" href="nice-highres.png"> <!-- recommended --> <link rel="icon" sizes="128x128" href="niceicon.png"> <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> <link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
Safariと微妙に違う・・。
コレが一番の理想系だそうな。
<link rel="icon" sizes="192x192" href="path/to/icon.png">
Android標準ブラウザ
端末によって挙動が微妙に違ってほんとに困ったもんだ。
そして端末によって有効な指定が違ったりする。
コレさえ指定すればOKってのはよくわからんかったので、後でだいたいなんとかなるコードを置いておきます。
ホームアイコンの追加方法
ちなみに情報。
- メニューから"ブックマークに追加"
- メニューから"ブックマーク一覧"を開く
- 該当するリンクのリストを長押し
- "ショートカット作成”を選ぶ
ってするタイプと、
- メニューから"ホームに追加" or "ショートカット作成"
ってできるのもいれば、
- メニューから"追加"
- リストから"ホームに追加"を選ぶ
ってのもいたり。
その上、手順によってはアイコン画像が出ないやつがあったりする。
まじで勘弁してほしい。
総じて
古い情報とか転がりまくってて何を信じればよいのやら案件ですが・・。
とりあえず個人的にはこの4つでいいと思ってます。
<!-- iOS Safari --> <link rel="apple-touch-icon" sizes="180x180" href="./path/to/icon.png"> <!-- iOS Safari(旧) / Android標準ブラウザ(一部) --> <link rel="apple-touch-icon-precomposed" href="./path/to/icon.png"> <!-- Android標準ブラウザ(一部) --> <link rel="shortcut icon" href="./path/to/icon.png"> <!-- Android Chrome --> <link rel="icon" sizes="192x192" href="./path/to/icon.png">
面倒くさいので画像は一番デカいのだけ用意すれば良いと思います・・。
ここの21個も、何個かは削れるんじゃないすかね。
何かあったら教えてください！
