ホームページをお気に入り登録したりたくさんのタブを開いている時などに、アイコンが表示されていることに気がつきますでしょうか。
このアイコンを「Favicon(以下、ファビコン)」といいます。
このファビコンは、Photoshopがなくても簡単に作成することができます。

今回は、無料でファビコンを作成できるツール7選と合わせて、基本的な知識(サイズやフォーマット、作成のコツなど)もご紹介します。
まだ設置していない方は、ぜひこの機会に設置してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

Illustratorを使ってファビコン（favicon）を作ろう
【全て無料！】商用利用OKのアイコン、イラスト素材8選
オシャレなアイコン使いに重宝する無料ピクトグラム40選

faviconとは

favicon(以下、ファビコン)とは、favorite icon(お気に入りのアイコン)という英語を縮約した言葉です。
ホームページのイメージマークとして、運営者がホームページに設置するアイコンです。

任意のホームページを開くと、URLやタブの左側にアイコンのようなもの表示されています。
例えば、ferretの場合は以下の画像のようなアイコン(画像赤枠部分)が表示されます。
1.png
これがファビコンです。
ファビコンは初歩的な画像作成とHTMLの知識があれば、誰でも簡単に作成することができます。
設定しなくても構いませんが、例えばブラウザでたくさんのタブを開いているときに一目見てどのタブがどのページが分かるため、ユーザー体験を向上させることができます。
ユーザーに記憶してもらい、リピーターの増やすたえのホームページ作りのためにも設定しておきましょう。

サイズ

ブラウザによって推奨されているサイズは異なります。
しかしいずれにしてもそれほど大きなサイズではありませんので、なるべくシンプルに、小さなサイズで見ても何のアイコンであるか把握できるようなものを意識しましょう。

  • 16px × 16px：IEのタブ
  • 24px × 24px：IE9のピン留め機能
  • 32px × 32px：Chrome、Firefox、Safariなどのタブ
  • 48px × 48px：Windowsのホームページアイコン

さまざまなサイズがあるため、すべてを用意するのは時間も手間もかかってしまいますので「16px × 16px」「32px × 32px」の2サイズだけでも用意しておきましょう。
32px × 32pxのみでは、ブラウザによって縮小が正しく行われない場合があるからです。

ファーマット

ファビコンの画像は、以下の3種類で表示することができます。

  • .png
  • .gif
  • .ico

しかし古いブラウザが対応していない場合もありますので**「.ico」**の使用が好ましいでしょう。

作成のコツ4つ

先にご紹介したように、ファビコンのサイズは非常に小さいです。
そのため、普段ホームページで使用するようなイラストや画像と同じ感覚で作成しても失敗します。

見やすく印象に残りやすいファビコンを作成する際に必ず押さえておきたいコツは、以下の4点です。

  • 鮮やかな配色にする
  • ホームページのイメージと乖離しない
  • ホームページのロゴを簡略化する
  • 線や色は少なめにシンプルなものにする

ferretではロゴを簡略化したものをファビコンとして使用しています。