ファビコンを設定することで、どれだけホームページの成果に影響を与えるかは未知数な部分が大きいかもしれません。ただ、ホームページのシンボル的な役割を担うので、自社のブランディングに一役買います。その他様々なメリットがあるので、設定するに越したことはないでしょう。

今回は、ファビコン作成のコツから、誰でも簡単にファビコン作成できるツール群をご紹介します。まだファビコンを設置されていない方は、この機会に是非設置してみましょう。

ファビコンとは

***
ファビコンとは、Webブラウザでページを開いた際、タブ部分に表示されるアイコンを指します。タブブラウザ(1つの画面で複数のページが開けるブラウザ)で複数のタブを開いた時に、ファビコンはページを判別する際の目印となります。

タブを開きすぎて、見たいホームページがどのタブなのかを見失ってしまったという経験をしたことはありませんか?
そういった迷子になってしまったユーザーに対して、ファビコンを目印に目当てのホームページみつけてもらうことも可能になります。
 
また、ユーザーがホームページをお気に入りに登録した際にも、ファビコンがあるのと無いのとでは印象と見つけやすさが変わってきます。

***
ブラウザ上でお気に入りに登録し、ブックマークバーに表示させている2つのホームページタイトルは同じですが、どちらの方が印象に残るでしょうか。瞬時に目に入ってくるのはファビコンが設定されている方ではないでしょうか。

ファビコンは膨大な情報が流れるインターネット上で、自社サービスを端的に表現してくれる存在です。ユーザーの記憶に残り、再訪率の高いホームページ作りを目指すのであれば、ファビコン設置は必須になります。

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

ファビコン作成のコツ

ファビコンは表示サイズが非常に小さいため、ホームページに入れ込むような画像やイラストと同じ感覚で作っても失敗しています。例えば、複雑なイラストをそのままファビコンサイズに縮小した場合、描線が多いため何を表しているのか全くわからなくなってしまいます。

重要なことは、ファビコン用の画像はできるだけ線や色が少ない、シンプルなものに仕上げることです。

一方で、大量に情報が流れるインターネット上でユーザーの目に止まるようなデザインにする(鮮やかな色を使う、ファビコンの枠をはみ出しているようなデザインを採用してみる等)必要もあります。また、ホームページの印象を左右する部分でもあるので、ページの雰囲気とマッチさせなければいけません。

簡単にファビコンを作成できる無料ツール

ファビコン作成モードがあるフリーのイラスト作成ツールをまとめました。

1.favicon.cc

***
http://www.favicon.cc/

参考:ferretのロゴ作成時間:5分

会員登録やツールのダウンロードなどは一切不要です。
上記のTOPページにアクセスすればすぐにファビコン作成を開始できます。画面右にあるカラーチャートから色を選択し、画面中央にあるフレーム内で作成します。

2.Favicon generator

***
http://favicon-generator.org/editor/

参考:ferretのロゴ作成時間:7分

会員登録やダウンロードなどは一切不要です。
TOPページにアクセスし、画面右下にある4つの選択肢から「Draw」を選択し、画面中央のフレーム内で作成します。

機能がシンプルな分、全く使い勝手の分からない初心者でもすんなり使い始めることができますが、シンプルすぎるためか使い慣れてくるとやや物足りなさも感じます。

3.彩彩畑

***
http://www.hm.h555.net/~irom/ssb_help/ssb_help_47.htm

参考:ferretのロゴ作成時間:5分

菜々畑はイラスト作成用のフリーソフトなので、使用するにはインストールする必要があります。(環境にもよりますが、インストールは数分で完了します。)
起動後の画面で右下にある「アイコン」ボタンをクリックすると、アイコン作成画面に入ります。

基本図形のテンプレや文字挿入も簡単に行うことができます。インストールする手間はありますが、機能は豊富でかつ一目見ただけでどのような機能が備わっているのかわかりやすい設計になっています。

既にある画像をファビコンサイズに変換する無料ツール

会社やブランドのロゴをそのままファビコンとして使用したい場合は、画像を取り込むだけでファビコンサイズに変換してくれるツールを利用しましょう。どのツールもプレビュー機能がついているので、ダウンロードする前に実際のサイズ感を把握することができるので、失敗も防ぎやすいでしょう。

4.favikon

***
http://www.favikon.com/

1.画面中央のモザイク柄の部分をクリックすると画像選択の画面が表示されます。
2.ファビコンにしたい画像を選択するとサイト上に画像が表示され、下部にファビコンのプレビューが表示されます。
3.プレビュー表示を見て問題なければ「DownloadICO」か「Download PNG」を選択してください。(大体の場合PNG形式で保存すれば良いでしょう)

5.favicon.icoを作ろう!

***
http://ao-system.net/favicon/index.php

1.画面左にある3つあるうちの「ファイル選択」から1つクリックすると、画像選択の画面が表示されます。
2.画像を選択し、下部にある「favicon.ico作成」をクリックすると、右側にプレビューが表示されます。
3.プレビューを見て問題なければ「ダウンロード」をクリックすれば画像が保存できます。

6.favicon generator

***
http://tools.dynamicdrive.com/favicon/

1.画面中央の枠内にある「ファイルを選択」をクリックすると、画像の選択画面が表示されます。
2.画像を選択し、下部にある「Optional」の項目の「Merge with a 32x32 desktop icon.」を選択します。
3.「create icon」をクリックすると、下にデスクトップの設置イメージが表示されます。
4.問題なければ「Download Favicon」を選択します。

まとめ

ファビコンは、サイズは小さいながらも存在感は大きく、ホームページのシンボル的な存在でもあります。自社ブランドをユーザーに覚えてほしいと考えている企業は設置するのが得策です。
ただ、先述したとおり、通常のイラストや画像のように作成するのは厳禁です。

ファビコン作成時には

1.極力シンプルに
2.ユーザーの目を引くことを意識
3.ホームページの雰囲気とマッチさせる

この3点に気を付けましょう。

ファビコン作成ツールも、画像をファビコンサイズに変換してくれるツールも、無料でしかも簡単に使えてしまうものばかりなので、上記ツールのいずれかをお試しされてはどうでしょうか。