文中の説明画像をクリックすると拡大します。
ファビコン(favicon)とは？
ファビコンとは、favorite iconの略で、ブラウザでWebサイトを閲覧しているときにURLの横やタブの横に出てくるアイコンのことです。
お気に入りや自分のパソコンのショートカットに入れた際にも、ファビコンは表示されます。
Webサイトの象徴をアイコン化したものです。細かいですがよく目にすることもあるので、設定しておいた方がサイトの個性を出せます。
ファビコンは必要なのか？
最近のブラウザは、タブを表示できるものが多くなってきました。そのため、たくさんのWebページをタブで開くと、一体どれがどのページなのかわからなくなります。
そういったときに、ファビコンを設定していると、「このアイコンはあのページだな」と視覚的に一目で判断することが可能です。
また、お気に入りやブックマーク機能で登録したサイトも、数が多いと見たいページを探すのが面倒になります。そんなときに、すぐ見つけるための目印となるのがファビコンです。
このような、閲覧者の細かい不満を解消することにつながるでしょう。
どうやって作るの？
ファビコンは、もちろんPhotoshopなどの画像作成ソフトを使って作る方法もありますが、Web上で操作できる無料のファビコン作成ツールを使えば、簡単に作成することが可能です。
作成ツールはいくつかありますが、今回は「x-icon editor」というツールをご紹介いたします。
サイトを開くと、作成できる画面が表示されます。
左側の作成ツールの使い方は以下の通りです。
- ブラシツール・・・自由になぞって描く
- 鉛筆ツール・・・ブラシと同様(タッチが微妙に違う？)
- 文字ツール・・・テキストを入力するとその文字を挿入できる
- スポイト・・・クリックしたところの色を反映
- 塗りつぶし・・・囲まれている場所を塗りつぶす
- 線ツール・・・ドラッグすると直線が描ける
- 四角形ツール・・・ドラッグすると四角形が描ける
- 円形ツール・・・ドラッグすると円形が描ける
- 消しゴム・・・ドット単位で自由に色を消せる
- ツールによって、線の太さや、大きさ、フォントなどを変更可能
- 色を原色の組み合わせによって変更可能
Windowsの「アクセサリ」の中に最初から入っている「ペイント」というアプリケーションと同レベルの機能を、搭載しています。色の配色や透明度も自由に変更できるので、時間をかければクオリティの高いものが作成可能です。
それぞれの大きさに拡大、縮小したりすることが可能です。また、「Import」ではパソコンに入っている画像をアップロードすることができます。「Preview」を選ぶと、作成したファビコンがどのように表示されるか確認することが可能です。
望むものが作れたら、「Export」でファビコン用画像(.ico)をダウンロードしましょう。
どの大きさで作ればいいの？
ファビコンは、ブラウザやショートカットによって画像の大きさが変わります。よく目にするのはブラウザタブなので、以下などだけでも問題ないでしょう（以下以外のサイズになるときは、勝手に拡大や縮小される）。
- Internet Explorer用に16px×16px
- Chrome用に32px×32px
しかし、勝手にサイズ変更されて画像がぼやけたりするのが嫌な方は、それぞれの大きさで画像を作ったほうが良いでしょう。
ファビコンが表示されるサイズは、以下を参考にしてください。
- 16px × 16px：Internet Explorerブラウザのタブ
- 24px × 24px：Internet Explorer9 ピン留め機能
- 32px × 32px：Chrome、Firefox、Safari などのブラウザタブ
- 48px × 48px：Windowsのショートカットアイコン
- 64px × 64px：高解像度 Windowsショートカットアイコン
- 152px × 152pxiOS：iOS、 Androidのホーム画面
- 512px以上 × 512px以上：WordPress
既存の画像をファビコンに使用する場合は、拡張子を「.ico」に変換する
既存の画像（png形式やjpeg形式などの画像）をファビコンに変換するには、画像の拡張子を「.ico」にする必要があります。
拡張子を変換する作業も、Web上のツールを利用しましょう。
使い方は以下の通りです。
- 画像を必要なサイズの分だけアップロードする
- 「favicon.ico 作成」をクリックしてダウンロードする
これで完了です。完成したファビコンをサイトにアップしましょう。
どうやってWebサイトにファビコンを設定するの？
WordPressサイトの場合
ファビコンを作成したら、WordPressであれば、テーマの「管理画面」→「外観」→「カスタマイズ」→「サイトアイコン」（テーマによってその項目は違うかもしれません）などから、簡単にアップロードできます。
HTMLサイトの場合
HTMLサイトであれば、サーバーのファイルマネージャーやFTPソフトでサーバーにアップロードしましょう。設置する場所は、ルートディレクトリと呼ばれる一番上の階層です。
サーバーにアップロードする方法として、ここではFTPソフト(File Zilla)を使用します。
ルートディレクトリに設置できない場合は、違う階層のファイルに設置してもOKです。
そして、<head>タグ内にコードを記述することで、ファビコンファイルを表示できます。
【ルートディレクトリに設置した場合のコード】
<link rel="icon" href="/favicon.ico">
【その他の階層に設置した場合のコード】
<link rel="icon" href="/設置した階層/favicon.ico">
FTPソフトの導入方法は、以下の記事の「FTPソフトでサーバーにアップロードしてインストールする」の項目を参照してください。
まとめ
- ファビコンとは、Webサイトをブラウザで見たときのURLの横やタブなどに表示されるアイコン。
- ファビコンは、「x-icon editor」などの無料ツールを使い、Web上で簡単に作れる。
- テーマのサイトアイコンの機能やFTPソフトによるアップロードで、ファビコンを表示できる。
