ウェブサイトのシンボルとなる小さなアイコン「ファビコン」ですが、あるか無いかでウェブサイトの存在感は大きく変わってきます。今回は実際にファビコン制作のコツからサイトへ設置するまでの流れをまとめてみました。

ファビコンとは？

ファビコンとはFavarite iconの略でウェブサイトのシンボルとなる小さなアイコンのことです。ブラウザのタブやブックマークのリストマークとして表示されます。ウェブサイトの識別や存在感を上げることができ、ユーザーにウェブサイトを印象付けるためのアイコンです。    

ファビコンに使用されるサイズ

ファビコンは表示される箇所やデバイスによってサイズが異なります。必ずしも全てを揃える必要はありませんが、近年ではスマートフォンの利用も増えてきていることもあり、できるだけ揃えている方が賢明かもしれません。とりあえずは下記の4サイズがあれば十分です。  

16px*16px	IEのブラウザタブやブックマークのアイコンで表示される
32px*32px	ChromeやFirefox、Safariなどのブラウザで表示される
48px*48px	Windowsのデスクトップショートカットアイコンなど
152px*152px	iOS、Androidのホーム画面用のアイコン

 

ファビコンを設置するまでの流れ

ファビコンは表示される箇所によって大きさが異なるため、いくつかのサイズをまとめたICOファイルという形式で保存する必要があります。まずはアイコンをデザインを制作し、ファビコンのICOファイルが用意できたらサーバーへアップロードしHTMLで設定します。   1. ファビコンをデザインする   まずはファビコンの元になるアイコンをデザインします。制作はAdobe IllustratorやPhotoshop、Fireworksなどのデザインツールで行いますデザインはファビコンの各サイズ分を作成します。   2. ファビコンのサイズごとに画像として書き出す   各サイズごとに作成したデザインをそれぞれ画像として書き出します。背景を透過にする場合はGIFやPNG形式で書き出します。   3. ファビコン作成ジェネレータを利用してICO形式のファビコンを作成   ファビコンの作成は便利なWEBサービスを利用します。いろんなファビコン作成ジェネレーターがありますがこちらのサイトが分かりやすくてオススメです。   半透過マルチアイコンfavicon.icoを作ろう! http://ao-system.net/alphaicon/index.php     先ほど書き出したそれぞれのファビコン用画像を、一つにまとめた『マルチアイコン』としてICO形式で保存します。保存するときのファイル名はなんでもOKですが、favicon.icoなどにしておくとわかりやすいです。 ※PNGやGIF形式でも表示されますがブラウザに依存するのでICO形式で保存する方がいいです   4. サーバーにファビコンをアップロードし、HTMLでリンクします   出来上がったファビコンをサーバーの所定の場所にアップロードし、下記のHTMLタグをheadタグ内に挿入します [code language="html"] 　　　　 <link rel="shortcut icon" href="サーバー内ディレクトリ名/favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="サーバー内ディレクトリ名/favicon.ico" type="image/vnd.microsoft.icon"> 　　　 [/code]   これでウェブサイトにファビコンが設定されました！ 小さなアイコンですが、ファビコンがあるとウェブサイトの存在感がアップしますし、見つけてもらえやすくなるというメリットもあります。

ファビコンをデザインする上での注意点

ファビコンは小さいもので数十pxほどのサイズになります。なので複雑なデザインは向いていません。 また、色数が多いとキレイに表示させるのも難しくなります。シンプルな形で使用する色などもある程度絞った方がキレイなものに仕上がるので、デザインを決める際には注意が必要です。     小さなサイズでも大きな存在感があるファビコンですが、ウェブサイトのブランディングや認知を高めるのにも大変有効です。オリジナリティ溢れるものを設定してみてはいかがでしょうか。