読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

2015年版: ホームアイコンの指定方法まとめ

調べては忘れを毎回繰り返すのもなんだかなーと思ったので、まとめておきます。
ちなみに、iOS/Androidのことしか書きません。
iOSは5以上、Androidは4以上のOSバージョンを対象としてます。

OperaとかMetroとかFireFoxとかは知りません!もっと頑張ってください!

あくまでこの記事を投稿した時点でのものです!

全般

  • 拡張子png
  • 勝手に角丸になるので四角のまま書き出してOK

Safari(iOS)

いちおう公式のドキュメントはこちら。

Configuring Web Applications

で、実は指定方法が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として扱われる。

具体的なサイズは、

iOS Human Interface Guidelines: Icon and Image Sizes

抜き出す。

端末 サイズ(辺)
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の端末の場合、

  • 適合するサイズより大きくて、最も小さいであろうapple-touch-icon-76x76.pngを探す
  • なければapple-touch-icon.pngを探す

らしい。
てかこっちのやり方でやってる人っているのかしら。

その他

  • iOS7以降は、懐かしの光彩風の処理をしてくれない
  • iOS6までは、懐かしの光彩風の処理をする

この処理を避けたい場合は、ファイル名を-precomposed.pngで終わるようにする。

Chrome

公式ほい。

Add to Homescreen - Google 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">
  • サイズは192が推奨
  • この中から見つかったいちばん大きなものを使う
  • Safariで有効なrel=apple-touch-..は近々サポートされなくなる模様 <- mjsk

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">

面倒くさいので画像は一番デカいのだけ用意すれば良いと思います・・。

Webサイトに必要なfaviconが21個になっていた - IT探検記

ここの21個も、何個かは削れるんじゃないすかね。
何かあったら教えてください!