どうもこんにちは。あっきぃです。
最近また身長が伸びた気がします。小三から成長期が続いてます。
毎分0.000001cmくらい伸びてます。すごいです。誰かほめてください。
(ってことは...って計算したそこの君は理系だ!)
さてファビコンを設定したいと思います。
ブラウザのタブのタイトルの横とかに出てくる小さな画像です。
1.ファビコンの画像を用意
今はブラウザが進化しているので「.ico」なんて形式の画像は用意しないで、PNGで行きましょう。
(※IEはIE11からPNGをサポート。でもIEは滅びればいいので無視しましょう。)

サイズも勝手にリサイズしてくれるはずなので
256px*256pxくらいの大きめのを用意しました。
設定する前はこんな感じ。
なんだか味気ないですね。

2.ファビコンの記述
百聞は一見にしかず。ってな感じで、次の記述をhead内に書きます。
<link rel="shortcut icon" href="http://appstars.jp/img/icon.png">
相対パスでも大丈夫そうですが、
絶対パス(http://〜)の方がミスが少なそうです。
えいやっ

どうでしょう。
味が出ましたね。(何味だろう...)
3.Web Appのアイコンも設定
iPhoneなどでホーム画面に
Webページを追加した時に表示されるアイコンを指定出来ます。

何も設定していないとこんな感じ。

ちょっとダサいですね。
そこでこんな記述をhead内に書きましょう。
<link rel="apple-touch-icon" href="http://appstars.jp/img/icon.png">
<meta name="apple-mobile-web-app-title" content="あぷすた">
<meta name="apple-mobile-web-app-title" content="あぷすた">
そいやっ

素敵ーっ
画像を256pxにしたのはこのためなのです。
(iPadAirで152px*152pxだからちょっと無駄にデカいかも。でもAppleが「大きいことはいいことだ」って言ってた。)
参考にしてくださいましー