作成方法の前にファビコンとは何？
ファビコンの作成を始める前にまず把握しておきたいのは、ファビコンとは一体どういったものなのかを知っておくことです。まずはあなたが今ご覧いただいているWebサイトのタブをご覧ください。
そこにはWebサイトのURL、もしくはWebサイトの名前の横にマークがついていることでしょう。この小さく表示されているマークのことを「ファビコン」と言います。正式名称 Favorite ICON といい、日本語に直訳した場合は”お気に入りのアイコン”となります。
今回は、このファビコン作成するための作成方法や、作成を円滑にするためのスムーズなテクニック、またファビコンを作成することによって生じるメリットや上手に管理したり作成するための方法についてご紹介します。
ファビコンを作成するといいことはある？
まずファビコン作成することによるメリットについて考えていきましょう。ファビコンを作ることがWebサイトを構築するために非常に良い影響を与えるという話がありますが、なぜそのような良い影響につながるのでしょうか。
Webブラウザのタブの横にそっと表示されるだけのマークであるファビコンが、どうしてWebサイトを運営するに当たってメリットとして数えられるのか、その理由についてご紹介します。
タブで他のWebサイトと見分けがつく
ファビコンを作成することでえられるメリットの一つとして、ごくごく単純に表示しているタブからあなたのWebサイトファビコンを経由することによって見分けがつきやすくなるということが挙げられます。
たくさんのタブを開いた状態で特定のWebサイトだけを表示したい場合に、いちいち一つずつWebサイトのタブを切り替えて確認していくというのはとても手間がかかります。ファビコンが作成され設定してあれば、見ただけですぐに判別が出来るようになります。
ユーザーフレンドリーなWebサイトを構築するのであれば、そのようにユーザーが直感的に操作できるような環境を整えるというのはとても重要なことです。
調べものなどに便利！
ファビコン作成して設置しておくことによって、ユーザーフレンドリーが高まることにつながりますが、タブの表示だけではなくお気に入りとして登録しているサイトのアイコンにも自動的にファビコンが設置されます。
なので、たくさんあるお気に入りの中からあなたのWebサイトを探し出す時に、作成してあるファビコンから容易にお気に入りの一覧から見つけ出すことが出来るようになります。
人は無意識のうちにファビコンを探すような目の動きをしています。ファビコンを作成し設置することによって、そうした初動からより閲覧してもらうためのアイキャッチとして活躍してくれるのです。
ファビコンの基礎知識
ファビコンを作成することによってWebサイトを構築するための基礎的な集客テクニックとして活躍するということは理解できたと思います。続いてはファビコンを作成するにあたって基礎的な知識をご紹介します。
ただ単純にアイコンを作成すればよいというわけではもちろんありません。一定のルールに従って画像データを作成しなければならないので、そのようなファビコンを作成する上での基本的なルールを解説します。
icoファイルで作成する
ごくごく一般的に絵を作成した場合には、ファイルの拡張子はGIFもしくはJPG、JPEGまたはPNGなどの「ファイル拡張子」とよばれる形式で作成されます。他にも作成に使うソフトウェアやツールによって拡張子は変わってきます。
いずれにしてもファビコンやアイコンに使えるファイルの拡張子というわけではありません。ファビコンやアイコンに使える拡張子というのは「ico」というファイル拡張子になります。icpファイルを作成するためには専用のソフトウェアが必要です。
作成した画像をicoファイルに専用のソフトウェアを使って変換することによって、初めてファビコンやアイコンとしてWebブラウザなどが認識するようになります。
favicon.icoで管理しよう
icoファイルによってファビコンを作成するにあたって、ファイルの名称にはfavicon.icoで管理します。ファイルの拡張子にはファイルの形式を意味するという使い方があると拡張子のところで説明をしましたが、ico拡張子にはアイコンとしての意味が与えられています。
どのような意味かと言うと、「複数のサイズの画像がまとめて一括管理されているファイル」という意味が与えられています。つまり、同じ画像ファイルでも中には何種類かのサイズで作られた同じ画像が含まれたファイルであるという意味を持つのです。
ですので、favicon.icoというファイルの中には、複数のサイズのファビコンやアイコンになる画像が必要となります。
ファイル拡張子とは？
ファイル拡張子というのは、元々は単なるファイルの名前を構成するものの一つでしかありませんでした。しかしさまざまなツールやソフトウェアが開発されていくにあたって、それぞれのソフトウェアでしか使えない専用のファイルを識別するための文字列として扱われるようになりました。
さらに、互換性のあるファイルであると言う識別を行うための名前としても利用されるようになり、次第に拡張子の種類によって、そのファイルがどのような種類のファイルなのかを識別するようになりました。
つまり拡張子というのは、「このファイルがどのような種類のファイルなのかを見分けるための文字列」と言えます。勝手に変更しても問題がないタイプもありますが、ファイルが使えなくなってしまう危険性もあります。
ちなみに、基本的にファイルの拡張子は見られなくなっている設定がほとんどですので、ファイルエクスプローラーの設定などから拡張子の表示をオンにすることで見ることができるようになっています。
さらにファイルの拡張子は、気分や任意によって好きなように変更することが可能です。しかし読み込むことができるファイルかどうかを拡張子で判断しているプログラムがほとんどなので、読み込むことができなくなる可能性が出てきます。
誤ってファイルの拡張子を変更してしまった場合は、改めて拡張子を入力し直すことで再び使えるようになります。また分からなくなってしまった場合も拡張子を判別するツールがWebサイトから入手することができます。
複数サイズを用意することが多い
では複数とはいってもどのようなサイズのファイルを用意すれば良いのでしょうか？ファビコンのサイズを複数用意する理由として考えられるのはいくつか挙げられます。
ファビコンのサイズを決めるにあたってはいくつかの状況が考えられますが、中でも一般的なのがブラウザに表示されるアイコンと、スマホのトップ画面に表示されるアイコンが挙げられます。
スマホのアイコンとしても使用される
スマホのトップ画面に用いられているアイコンの基本的なサイズは、64x64ピクセルとなっています。つまりこのサイズに加えて、一般的なファビコンのサイズである16x16および32x32ピクセルのアイコン画像が必要となります。
これらのサイズのアイコン画像は、最低限用意するべきサイズのアイコン画像として考えておく必要があります。さらに一般的なicoファイルに使われるサイズを加えると、より使いやすいicoファイルとして作成できます。
ファビコンより解像度高めがおすすめ
しかしこれらの画像ファイルを作成するにあたって注意しておきたいことがいくつかあります。それは、作ろうとしているアイコンのサイズよりも小さな画像で作成するのはNGだということです。
どうして作成予定のアイコンよりも小さなピクセルサイズの画像ファイルでアイコンを作成してはいけないのかと言うと、単純に実際に使用する際に、アイコンとして表示される画像が非常に汚くなってしまうからです。
これは元々設定してある画像を無理やりアイコンのサイズに合わせて拡大して表示する機能が働くからです。そのためファビコンやアイコンを作成する場合は、作成予定のサイズよりも大きなピクセルサイズの画像ファイルを作成するのがベストということになります。
ファビコン設定方法
ファビコンをWebサイトに設定する方法には二つの方法があります。ひとつめは「Webサイトのroot directoryにfavicon.icoをアップロードする」という方法です。そしてもう一つは、「<head>内にLinkタグで指定する」という方法です。
どちらもそれほど難しくはありません。ちなみにWebサイトではなくブログなどの場合は、運用しているブログのツールにもよりますが設定項目内にファビコンの項目を探してアップロードすると自動的に設定されます。
ルートディレクトリにアップロード
ルートディレクトリとは、ホームページやWebサイトのインデックスファイルが設置してある場所と同じ場所のことを指します。つまり、WebサイトのURLが【http://a.com/】であった場合では、URL直下がルートディレクトリとなります。
つまりこの場合には、【http://a.com/favicon.ico】になるようにアップロードすると、自動的にファビコンが設置され認識されるようになります。しかし、利用しているサーバーサービスによってはこのようなルートにアップロードが使えないことがあります。
その場合は続いて紹介する「タグで指定する方法」でファビコンを設置するようにしてください。アップロードができれば、ファビコンとしてWebサイ上で認識できるようになります。
タグで指定する
あらかじめファビコンとなるファイルを所定の場所にアップロードを行っておき、アップロードした画像ファイルをファビコンとしてタグを使って呼び出す方法です。まず任意の場所に作成したファビコンファイルをアップロードします。
この場合のアップロード先は、画像ファイルばかりを集めているところで構いません。わかりやすい場所であればどこでも結構です。続いて、すべてのhtmlファイルに設置してある<head>タグ内に、<link rel=”shortcut icon” href=”フルパス”> として設置します。
フルパスで指定するのはアップロードしたファイル名をディレクトリを含めて全て入力します。先ほどのURLを例に挙げると、a.com内のimgフォルダにアップロードしている場合では、【http://a.com/img/favicon.ico】まで入力しましょう。
こうすることで、このタグを全てのheadタグ内にコピペするだけで使用できます。新しいページを作成する場合でもテンプレとして設定しておくだけで手間が省けるようになります。
ファビコンの簡単な作り方
手軽に自分のWebサイトのファビコンを作りたいのであれば、とても簡単な方法がいくつかあります。あらかじめファビコンに設定しておきたい画像ファイルが用意されているのであれば、後はicoファイルに変換してしまうだけです。
ファビコンとして設定したい画像ファイルがない場合は、どのようなアイコンをファビコンとして設定したいのかを考えなければなりません。その場合はフリーのロゴ作成ツールなどを使うと比較的簡単にそれなりのものを作成することができます。
そのようにして予めファビコンとして使用することができる画像ファイルが用意できたら、後はファビコンへと自動的に変更してくれる作成サイトを利用するのがオススメです。
ファビコン作成サイトで作るのが楽
ファビコンを作る上で注意したいこととして、サイズの指定や設定方法などやや面倒な手続きが必要なことです。その中でもたくさんのサイズをまとめて一気に作る必要があります。
そこで、ファビコンの作成をするなら、オンラインなどで公開されているファビコンの作成ツールを使用するととても便利で簡単に作成することができるのでオススメです。
ここからは、Webサービスとして公開されているファビコンの作成ツールの使い方やその紹介をさせていただきます。ファビコンを作成する上での、ツールの設定方法などについても説明しますのでご覧ください。
x-icon editorならWebブラウザで完結
ファビコンとして使用するための画像ファイルが用意できていない場合にまとめて作成から設置直前の状態まで作りこんでしまうことができるWebサービスが「x-icon editor」です。
x-icon editorで用意されているWebサービスを使えば、手間さえかければごくごく簡単なファビコンからとても複雑で作りこまれたファビコンまで様々なものを作成することができます。
それではその使い方について順番に説明します。それほど難しくはないので基本的な使い方から覚えていきましょう。
x-icon editorの使い方
x-icon editorには直接ファビコンを書き込むモードと、元々ある画像ファイルを取り込んでファビコンとして出力するモードの2種類があります。直接書き込むモードに関してはいわゆるお絵かきツールと同じ使い方でファビコン作成していきます。
この時に、必要なサイズのファビコンがあれば全てのサイズの画像を取り込むもしくは作成しなければならない点に注意してください。「EDIT」にある4つのキャンパスのうち、必要なサイズのキャンパスにファビコンの画像を描きこみます。
64x64サイズに描き上げたファビコンがあれば、キャンパスを指定して「GetFrom」でリサイズした画像を自動的にインポートすることもできますので、全てに描く必要はありません。出来上がったら「Export」でicoファイルをダウンロードします。
Photoshopで作ることも可能
Photoshopで作成する場合は、まずは必要なプラグインをフォトショップに登録する必要があります。登録しなければならないプラグインは「ICOFormat」というプラグインです。
あなたのパソコンのOSに合わせて最適なバージョンをダウンロードして使用します。設定方法は、photoshopのプラグインフォルダにコピーアンドペーストして使うだけです。
実際の作成方法は、作成した画像ファイルを出力する時に「ico」でファイルとして出力するだけなのでそれほど難しい手順は必要ありません。
画像をファビコン化したいならfavikon
既にある画像をファビコンとして作成するのであれば、「favikon」というWebサービスもオススメです。使い方はものすごく簡単で、ファビコンとして作成したい画像をアップロードして変換するだけです。
正しくはアップロードが行われれば、ICOファイルとPNGファイルの画像データをダウンロードできるようになります。出来上がった画像データは、先ほど説明した設定方法で設定してみましょう。
綺麗なファビコンを作成するコツ
単純なファビコンやシンプルなファビコンなどいろいろなファビコンがありますが、見た目にキレイなファビコンの方が良い印象を与えられるのはいうまでもありません。そこで、美しいファビコンを作成するためのコツを解説します。
いくつかのテクニックがある中で、デザイン的に美しいファビコンやアイコンの作成のコツや、どのような方法がキレイなアイコンやファビコンをつくる方法として適切なのかについてご紹介します。
画像を透過する
自分のファビコンやアイコンを作成するときにありがちなことですが、ロゴマーク等を使って作成したファビコンの背景が真っ白になっているなどで見た目に妙な印象をあたえてしまうファビコンになる事がままあります。
背景色も含めてのデザインであれば問題ありませんが、そうでない場合はただただ変なファビコンになってしまいます。こういう時はロゴマークの背景は「透過」させてしまいましょう。その場合は透過処理ができる画像編集ソフトを使って作成する必要があります。
背景に色を付ける
背景がそのまま白色の場合は変なファビコンに仕上がってしまいますが、逆に色をつけてしまうとかえってオシャレな印象になる場合もあります。これはファビコンのデザインに寄る所が大きいのですが、敢えて透過させるよりも印象的なデザインになるので試す価値があると言えます。
アニメーションという手も
ファイヤーフォックス系のブラウザでしか表示されないのですが、対応しているブラウザであればアニメーションのファビコンを設定することも可能です。この場合はアニメーションのファビコンが表示されないブラウザ用に2種類のファビコンが必要です。
アニメーションが表示されないタイプのブラウザでは、設定していないとファビコンそのものが表示されなくなってしまうので、せっかく作成してもファビコンが無かったことにされてしまいます。
ですから、アニメーションのインパクトを活かしつつ作成するのであれば、アニメーションのファビコンとノーマルタイプのファビコンと種類を設置して、それぞれ指定する必要があります。この場合はタグ設置がおすすめです。
色だけのアイコンでもおしゃれ
なかなかよいアイデアが思い浮かばない！というのであれば、あなたのWebサイトのテーマカラーをそのままファビコンに採用するというのも良いでしょう。ファビコンのようなマークはWebサイトとの親和性がとても大切です。
テーマカラーをベタ塗りするだけでもファビコンがかなりおしゃれな印象になるのでおすすめです。四角に区切ってチェックにしてみたり、丸だけでも良いでしょう。シンプルなテーマカラーだけでも十分にデザイン性を確保出来ますので試してみましょう。
ファビコン作成時の注意点
ファビコンを作成する上で注意したい事として、まったくの０から作成する場合のデザインは、かぎりなくシンプルなデザインを心がけましょう。複雑なデザインのファビコンは、16x16のような極めて小さい画像では潰れてしまうからです。
ドットを意識してプレビューで逐一確認するようにしておけば、Webブラウザなどで表示されたときの見栄えがどうなるのか？という点をイメージしながら作成することが出来ます。
また、大きな画像から小さな画像に変換した場合も、グラデーション部分を調整することでゴ茶っとした印象ではなくスッキリとした印象のフォバコンを作成することが出来ます。
サイズをいくつか用意する
ペイントソフトにプラグインを使用することで透過ファイルの編集も出来るようになります。それから作成したファビコンファイルをキャンパスサイズの変更を駆使することで、さまざまなサイズパターンを作成することもできます。
ファビコンはスマホのデスクトップ用のアイコンとしてや、パソコンのショートカット用のアイコンとしても使用されることがあります。ですのであらかじめ大きめのサイズを含めて複数の画像サイズを含めたicoファイルが必要になります。
標準搭載のペイントソフトでもプラグインを入れることで透過ファイルのファビコン用icoファイルを簡単に作成することが出来るようになります。もしも手持ちに優秀な編集ソフトが無ければ、ぜひ挑戦してみてください。
設定後は必ず検証を行う
一通りの設定が終わったら、それぞれの環境下でどのようにファビコンが表示されるのかを検証してみましょう。場合によってはブラウザのキャッシュの設定によってファビコンを変更したのに反映されない場合もあります。
そんな時はブラウザのキャッシュを、あなたのサイトだけクリーンしてから改めて確認すると、正しく反映されたものが表示されます。スマホやパソコンなどいろいろな環境かた確認することをおすすめします。
ファビコン作成に役立つファイル変換ツール
ファビコンを作成するにあたって、使いやすく作成しやすいツールについてご紹介します。ダウンロードして使用するタイプのアプリケーションや、オンライン上でそのまま使えるWebサービス等の中で、特にicoファイルを作成するのに使えるサービスを紹介します。
Quick Any2Ico
Windows上で動作する画像変換ソフトが「Quick Any2Ico」です。動作対象となるWindowsのバージョンは、WindowsXP0/Vixta/7/8/8.1/10となっており、すべて64BitのOSが対象です。32BitのOSでは動作補償対象外なので注意が必要です。
またダウンロード後にexeファイルを実行時に警告が発生する場合がありますが、そのまま「実行」を押下で起動させることができます。全て英語表記ですが、実行内容はきわめて単純ですので迷うこともないでしょう。
@icon変換
こちらも同じくWindows上で動作するフリーソフトで、動作保証対象はWindowsのXP/Me/2000/98で、いずれも32/64bitで動作します。すこし古いソフトなので最近のOSでも動作検証が行われていません。変換可能な画像サイズは256ピクセルまでとなっています。
透過マスクの編集が非常に使いやすい機能で、ちょっと不自然なアイコンでも美しい仕上がりに編集できる機能として人気です。難点として256色の安全色までしか対応していないということも注意が必要です。
ToYcon
こちらもWindows上で動作するicoファイル作成ツールです。対応OSは32/64bitのWindowsXP、Vista、7となっています。最終更新日が2013年のため、2013/2/11以降にリリースされたOSでの対応についての補償がありませんのでご注意ください。
操作方法は、あらかじめ作成したいicoファイルの設定をToYcon上で行っておき、あとはico化したいファイルをドラッグ&ドロップするだけの簡単動作でファビコンやアイコンに使えるicoファイルが作成できる優れものです。
favicon generator
Web上で適切な画像から一括でファビコンやアイコンに使用できる9種類のサイズの画像ファイル集（icoファイル）を一括で作成出来る便利すぎるwebサービスです。サイズは16ピクセルから512ピクセルまで作成されます。
そのため、あらかじめ用意しておく画像は512ピクセル以上、700ピクセル以下の画像を用意しておく必要があります。illustratorなどのベクター形式のファイルなら簡単にサイズ調整したものが用意できますのでおすすめです。
ファビコンと一緒にショートカットアイコンも作成しよう
実は、単なるファビコンとしてWebサイトに設定するだけであれば、なにもicoファイルにする必要はなく、jpgでもgifでもpngでもsvgでも設定することは可能です。しかし、なぜicoファイルでの作成をおすすめするのかというと、「ショートカット登録時」に関係しているからです。
パソコンやスマホでサイトをショートカットに登録した時に、あなたのファビコンがアイコン化するためには、icoファイルである必要があります。さらに、表示設定ごとに調整された画像の方が遥かに綺麗に表示されるので、icoでのファビコン作成はおすすめなのです。
スマホユーザーにとって便利になる
とくに、スマホユーザーにとってホーム画面にwebサイトのショートカットを作ってアクセスする人は意外と多く、よく見るサイトなどはパッと見るだけで分かるデザインであれば嬉しいものです。即座にタップできますし、おしゃれなアイコンであれば見られても平気という側面もあります。
モバイル用アイコンの作り方
スマホやタブレットでのみを対象としたサイトであれば、わざわざicoファイルを作成する必要はありません。むしろ、スマホやタブレットに最適な形式のファイルがありますので、そちらで作成する方が効率が良い、と言えます。その名称とは「apple-touch-icon.png」です。
apple-touch-icon.pngファイルで作成しよう
apple-touch-icon.pngファイルというのは、これまでに作成したアイコンファイルを「apple-touch-icon.png」という名称でpngファイルとして保存するだけのファイルです。そのため作成にはPCのペイントソフトでも可能です。PCの使用を考慮しないのであれば、これだけでも構いません。
ファビコンを作成して他のサイトと差別化を！
ファビコンを作成してWebサイトに設定することで、さまざまな利点が得られることが理解いただけたでしょうか？もうすでに設置も完了されているのであれば、忘れずにテストを行って、反映されているかどうかを確認しましょう。
