ファビコンを設定する | Webデザイナーを目指す人のブログ

今日はファビコンの設定方法について書いていきます。

ファビコンとはウェブサイトを開いた時のタブについているアイコンのことです。
ファビコンを設定しているとこのように表示され、いくつかタブを開いている場合でもぱっと見た時にどのサイトかがわかります。

一方こちらは、ファビコンを設定していないサイト（このブログ）のタブです。

ファビコンを設定していないサイトもたくさんあります。
もしたくさんサイトを開いていた時にファビコンが全部このように表示されていたらどうでしょう。
自分がみたいサイトを探すのが大変になります。

なのでファビコンはなるべく設置したほうがいいです。
私も今週中にファビコン設置しようと思います。
設置の過程は設置が完了したら追記するとして、今は先に基本的な部分を勉強しておきましょう。

調べたところ現在はファビコンのサイズは20種類以上あるらしいです。
多い・・・
20種類以上あるのはウェブクリップアイコンやショートカットアイコンの登場によるものだそうです。

ただ、ベースとなるのは16×16もしくは32×32です。

16×16はIEに対応
32×32はChrome、Firefox、Safariに対応

となっているようで、ここはきちんと抑えておきましょう。

ファビコンの拡張子は「ico」をつけることが多いようです。
というのも「png」や「gif」だと古いブラウザだと対応していない場合があるからです。
せっかく作ったものなので、「ico」で設定していつでも見れるようにしましょう。

ファビコンを作るときは透過処理をしたほうがいいです。
透過処理をしないと、ファビコンの余白が白くなってしまいます。
これだけでダサさが3割ましになるので、透過処理は忘れずに。

では今日はここまでにして、また後日ファビコンの設置方法を追記します！

実際にfaviconを設置したのでその方法を書いていきます！

今回は上でも書いたように16×16と32×32のfaviconを作成しました。
faviconを作る時にfont-awsomeを使ったんですが、フォトショップでフォントがうまく反映されなかったのでイラレで作っています。

こんな感じにしています
pngで書き出してicoに変換します。
icoの変換は半透過マルチアイコン作成で出来ます。

画像を添付してアイコン作成をおすと上の画面のようになるので、アイコンをダウンロードします。

サイトに設置するにはhead内に

<link rel="shortcut icon" href="http://ファイルのパス/favicon.ico">

を記述すればOKです。

このようになります！！！！
設置ができました。

思ってたよりも簡単にできたのでまだ設置していない方は是非設置してみて下さい！