サイトを閲覧するとき、複数のタブを立ち上げて仕事をするということはよくありますよね。このとき、それぞれのサイトを瞬時に判別してタブを切り替えるのに役立つものは何か？
それがファビコンです。
ファビコンはブラウザのタブやナビゲーションバー、ブックマークリスト、検索履歴などに表示される小さなアイコンです。青い丸の中にFの文字があればFacebook、封筒のイメージはGメール、水色の鳥ならTwitter。これらがファビコンの一例です。皆さまがウェブサイトを作成していて、効果的なオンラインブランディングの方法を探しているなら、ファビコンを作ることがベストな選択肢になってくるでしょう。
とはいっても、「自分でファビコンを作成するデザインスキルはないしなあ」、と思う人もいるかもしれません。幸いなことにそのスキルは不要です。ファビコンやアイコンを作成してくれるツールを使用すれば問題ありません。
今回の記事では、ファビコンの詳細と、優秀なファビコン・アイコン作成ツール10選のリストをご紹介します。会社のロゴ、名称、画像などをアップロードするだけで、すぐに使えるファビコンやアイコンが出来上がりますよ。
ファビコン（favicon）とは何か？
ファビコン（favicon）は、ブラウザ（タブ、ブックマークバー、履歴など）に表示される小さな画像です。この画像は「favicon.ico」というファイル名でウェブサイトのrootディレクトリに置かれます。これによりブラウザは、どの画像をサイト名の横に表示させればいいかを識別できます。
ファビコンはあまりにも小さいサイズなので、サイトテーマを補完するようなスタイルのシンプルな画像において、もっとも効果を発揮します。例えばShopifyでは以下のようなファビコンを使っています。
だいたいのブラウザは、16×16ピクセルの画像をファビコンとして使用します。ただし、いくつかのブラウザやCMSでは、32×32、48×48、512×512といったバージョンの画像を要求されることも珍しくありません。
なぜなら、ファビコンはブラウザタブだけで使用されるとは限らないからです。サイトをブックマークしたときや、スマホのホームスクリーンにショートカットを保存したときなどにも、ファビコンが使われます。そのような場合には、16×16の画像を引き伸ばしたものより、大きいバージョンの画像が使用されるほうがいいわけです。そのため、ファビコンのベストサイズというものは、とくにないのです。
従来、多くのブラウザで表示されるのは「.ico」フォーマットのファビコンでしたが、現在では「.gif」や「.png」などのファイルフォーマットも使用できるようになっています。
ファビコンを使用するメリット
ウェブサイトでファビコンをアイコンとして使用するおもなアドバンテージは以下のとおりです。
信頼性
サイズは小さいながら、ファビコンがあるとサイトの信頼性が上がってプロフェッショナル度が増します。最近のネットユーザーは、サイトがいかにプロらしくデザインされているかを見てその起業家やビジネスを判断する傾向にあるため、カスタムしたファビコンによってポイントを稼ぐことが可能です。
ブランド喚起
ファビコンは、ウェブサイトの名称とともに、ビジターが企業と関連付けて想起するものです。なぜなら、サイトを訪れた人はその両方を目にすることになるからです。その意味では、ブランディングの観点からいうとファビコンはサイト名称より重要な役割を担います。グラフィックはテキストよりも記憶しやすく想起しやすいのです。
リピート訪問
ファビコンは、月間のトラフィックを上昇させる点でも役立ちます。たとえば、サイトを初めて訪れたユーザーが急いでいたため後で読もうとブックマークしていたとしましょう。後日、ブックマークを確認したユーザーは、リストの中でファビコンによって目立っているあなたのサイトをすぐに認識できます。かんたんにいうと、サイトが検索エンジンユーザーによってブックマークされて再訪される可能性が高まるということです。
ここまでメリットを確認してきましたので、いよいよ自分のサイトのためにファビコンを作成していきましょう。幸いなことに、パーソナライズされたアイコン作成に役立つジェネレーターツールがいろいろあります。
オンラインのファビコンジェネレーター：ベスト10
1.RealFaviconGenerator.net
ユーザーフレンドリーで直截的なファビコンジェネレーターであり、わずか数分でカスタムアイコンが作成できます。必要なのは、260×260の「.svg」「.jpg」「.png」ファイルのいずれかを用意することです。あとの作業はこのツールにお任せしましょう。
RealFaviconGeneratorは、Mac、デスクトップブラウザ、Androidデバイス、Windows8タブレット、iPad/iPhoneなどで表示できるファビコン画像を生成します。
また、このファビコンジェネレーターによって、あなたが使用している既存アイコンの表示状態をチェックすることも可能です。サイトアドレス、URLを空欄のフィールドに入力して、“Check Favicon”のボタンを押すだけで、アイコン表示に関するさまざまな問題のレポートを得ることができます。
なんらかの問題が見つかったら、そこで提案される推奨方法によって解決しましょう。これにより、ブランド全体の視認性と認知度が向上します。
2.Favic-o-Matic
Favic-o-Maticは多彩なファビコンジェネレーターであり、大きく2つのタイプの機能を提供します。無料で作れる多様なプラットフォーム用のアイコン、または32×32と16×16ピクセルの「ico」ファイルを入手できます。
また、高度な設定も可能です。たとえば、ファビコンのサイズをプリセットするのにメトロタイルオプションが使えます。特定のバックグラウンドカラーを選択したり、RSSフィードURLを入力したりもできます。
設定が済んだら、画像をアップロードして結果を待ちましょう。このツールはファビコンをあなたのサイトにアップする際に必要となるHTMLコードも一緒に作成してくれます。
3.Favicon.cc
ファビコンのジェネレートだけではなくデザインもできるツールです。作成済みのロゴからファビコンをデザインするためにグラフィックをアップロードするか、ゼロからデザインすることが可能です。
クリックで色相を調節することができるので、事前に特定のカラーを準備する必要もありません。ほかのユーザーが作成した最新のトップレベルのファビコンも表示されるため、インスピレーションが得られます。
Favicon.ccでは、アニメーションのファビコンも構築できます。これらのアイコンは、クリエイティブ・コモンズ（CC）のライセンスにおいて公開可能です。また、ブラウザのアドレスバーに表示させるための「.ico」ファイルフォーマットもダウンロードできます。
4.Favicon-Generator.org
あなたのサイトでも使用できるデザイン済みファビコンの広範なライブラリが提供されます。カラー、文字、キーワードで検索可能です。
または、「.jpg」「.gif」「.png」フォーマットのグラフィックをアップロードして、「.ico“ファイルに変換できます。ウェブ用のアイコンのほか,Microsoft、iOS、Androidアプリ向けにも作成可能です。
Favicon-Generatorは、アイコンを編集する方法はあまり提供していませんが、サイトへのファビコン表示に必要なHTMLを生成します。
5.Xiconeditor.com
Xiconeditorは、オンラインでアイコンを素早くかんたんに作成する方法を求めている人にとって、信じられないようなツールです。独自のアイコンを作成するための機能として、ペンシル、ブラシ、テキスト、消しゴムなどの多彩なツールを提供しています。
ゼロからの作業を望まない場合は、好みの画像をアップロードしてジェネレーター内で直接トリミングできます。さらに、ダウンロードする前にデザインをプレピューできるので、ブラウザでどのように見えるかを正確に把握できます。
また,このツールを使うと余白の設計や透過度・カラーなどの設定が可能です。出来上がりに満足できたら,プレビューしてからファビコン画像を「.ico」フォーマットで出力しましょう。
6.Genfavicon.com
このファビコンジェネレーターは、なにより操作がかんたんです。画像をアップロードして、カット＆プレビューツールでクロップするだけでOK。結果が問題なければ、「.ico」フォーマットでファイルを保存して、おしまいです。
このツールのさらにおもしろい点は、アイコンのライブプレビューができることです。ブラウザでアイコンがどう見えるか、かなり正確に判断できます。
Genfaviconが受け付ける画像のピクセルサイズは、16×16／32×32／48×48／64×64／128×128です。
7.Antifavicon.com
Antifaviconが今回のリストのほかのツールと異なっているのは、画像ではなくテキストベースでファビコンを生成する点です。
ツールのホームページには2つのテキスト入力フィールドがあり、ファビコンに反映したい数字や文字をタイピングできます。また、ファビコンのテキストとバックグラウンドのカラーをピッカーで選択して修正可能です。
Antifaviconは編集機能が限られていますが、時間や予算やスキルがない人にとって、素早くシンプルなアイコンを作成したいときに良い選択肢となるでしょう。
8.FavIcon.pro
「.jpg」「.gif」「.png」の画像を「.ico」ファイルに変換できる優れたファビコンメーカーの1つです。ほぼ数秒で、グラフィックをファビコンやアプリアイコン、デスクトップアイコンに変えることができます。
変換する前に画像のサイズを16×16〜128×128ピクセルの間で選択することが可能です。初心者向けのインストラクションもあるのも便利です。
全体的に見てFavIcon.proは、どんな画像でもウェブサイト用の効果的なファビコンへと素早くPCから変換する方法を提供しています。
9.Favicongenerator.com
商業用または個人用のどちらでも使えるアイコンを作成するツールです。既存の「.jpg」「.gif」「.png」等のグラフィックを「.ico“ファイルに変換できます。最新のJavaScript、CSS、HTMLの技術を反映できるように、ツールのコードは頻繁にアップデートされています。
2MB以下の正方形の画像を使ってください。受付可能な画像ピクセルサイズは、16×16／24×24／32×32／48×48／64×64です。
ファビコンを作成するには、アップロードする画像を選択して、希望のサイズを選び、“Create Favicon”のボタンをクリックするだけです。スクリーンに表示されているインストラクションは、自分のサイトにファビコンを追加する際に役立ちます。
上記のほか、FAQセクションがあるので、AppleデバイスのためのRetinaファビコンの作成方法なども知ることができます。
10.Webestools’s Favicon Online Generator
Webestoolsが提供する無料のファビコンジェネレーターは、画像のアップロードとツール内での編集が可能です。また付属のカラーツールを使ってファビコンをゼロから作ることもできます。このツールにはポイントアンドクリック編集機能があり、望む結果を得やすくなっています。
出力サイズに関しては16ピクセルまたは32ピクセルを選択できます。実際のファビコンの見た目をプレビューすることも可能です。出力内容に満足できたら、“下载”ボタンをクリックして「.ico」フォーマットで保存します。
またWebestoolsは、ファビコンをサイトに設定するためのHTMLコードも表示します。画面のインストラクションに従って、ファビコンを瞬く間に実装できます。
ファビコンをサイトに追加する方法
ファビコンが作成できたら、サイトにアップロードして実装しましょう。WordPressを使っている場合、テーマカスタマイザー機能で設定するか、プラグインのAll In One Faviconで設定できます。マニュアルでやるなら、次のとおりのステップになります。
- FTPマネージャーにサインインする（ftp://username@yoursite.com）
- サイトのrootディレクトリに「.ico」ファイルをアップロードする（/wp-content/themes/your-theme-folder）
- 「function.php」か「header.php」のファイルを開き、ヘッダータグの下に以下のコードを記述する。
href=以下は、アイコンのパスに置き換えてください。
ECプラットフォームで作られたサイトであればプロセスはもっとかんたんです。たとえばShopifyの場合は管理画面から「テーマエディター」を開き、「テーマ設定」からファビコンの画像を選択し、保存するだけです。こちらのリンクではファビコンの設定方法を紹介しています。
すべてのステップを正確にやり終えたら、だれかがあなたのサイトを見たときにファビコンが表示されているはずです。
さいごに
ファビコンは、ウェブサイトのブランディングにとって最重要な要素とはいえないかもしれませんが、かんたんに作成できて幅広いメリットが得られるものです。この小さなグラフィックは、ロゴやヘッドラインが置けない場所であなたのビジネスを表象します。そして、過密しているブラウザウィンドウの中で目立つために必要な強みをサイトに付加してくれます。
ですから、この小さく強力な画像の存在を忘れてはいけません。上記リストの中にあるファビコンジェネレーターを使用して、自分のサイト用のファビコンを作成してください。シンプルな機能を活用すれば、デザイナーでなくてもサイトの有用性を高めるファビコンを作れるのです。そしてプラットフォームをまたいで多くの人たちに優れたユーザーエクスペリエンスを提供できます。
原文：Adeel Qayum 翻訳：深津望
