ファビコンって?
favorite + icon = favicon。もともとはIEの「お気に入りに追加l」で表示される用のアイコンだった。最近のブラウザとかでは、お気に入りだけじゃなく、ページのタブとかにファビコンを読み込むがスタンダードになってきてるんで、お気に入り専用アイコンっていうもともとの意味は消えつつある。
サイトへの導入
サイト共通で使うならルートにfavicon.ico
という名前で設置すればOK
ページごとに指定したいなら以下のコードを.
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico”>
準ファビコン
Webclipアイコン
<link rel="apple-touch-icon" href="webclip.png" />
※ コードの見やすさのために各アイコンは相対パスで記述していますが、万全を期すならiconのURLはドメインを含む絶対パスでの記述をおすすめします。
ファビコンファイルの作り方
サイズについて
サイズは環境によって諸々ある。面倒であれば32pxで作っとけ、みたいな感じ。
32pxで作る中で具体的に問題が出てきたら、マルチアイコンを検討。
フォーマットはico
がオススメみたい。
icoの作り方
お手軽に済ませるなら、Macの人はプレビューアプリを使ってなんとかなるようです(ちゃんと最後まで読む)。
http://www.msng.info/archives/2011/12/how-to-create-favicon-with-mac.php
参考:
http://goalist.hatenablog.jp/entry/2014/06/10/092452
http://liginc.co.jp/web/design/material/16853