ホームページをお気に入り登録したりたくさんのタブを開いている時などに、アイコンが表示されていることに気がつきますでしょうか。
このアイコンを「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ではロゴを簡略化したものをファビコンとして使用しています。

無料で簡単に作成できるツール7選

ファビコンの作成は、Photoshopでも可能です。
ここでは、無料で簡単に作成できるツール7選をご紹介します。

1.@icon

_icon.png
http://freesoft-100.com/review/aticon_henkan.php

Windowsでのみ使用可能なソフトです。
BMP・ICO・PNG・PSD・EXE・DLL・ICLの7種類の画像形式を読み込み、BMP・ICO・PNG・ICLの4種類の画像形式として保存できる、画像変換・アイコン作成ツールです。
パソコン上にインストールして使用してください。

2.ToYcon

ToYcon.png
http://www.gigafree.net/tool/icon/toycon.html

Windowsでのみ使用可能なソフトです。
PNG・BMP・JPG・TGA・GIFなどの画像ファイルからアイコンファイルを一発生成することができます。
また、アイコンをPNG画像にする機能も搭載されています。

アイコン化したい画像ファイルをドラッグ&ドロップするだけでICO形式のアイコンファイルに変換できます。
アイコンサイズは、16px × 16pxから128px x 128pxまでのサイズを格納することが可能です。

3.Quick Any2Ico

Quick_Any2Ico.png
http://www.gigafree.net/tool/icon/QuickAny2Ico.html

Windowsでのみ使用可能なソフトです。
JPG・PNG・BMP・GIF・JPEG・WMF・EMF・TIFF・TIF・ICOの10種類の画像形式を元に、さまざまなサイズのマルチアイコンを一発生成してくれます。
アイコンを抽出する機能も搭載されています。
アイコンサイズは、16px × 16pxから512px x 512pxまでのサイズを格納することが可能で、どのサイズを格納するかは自由に選択することができます。

4.favicon.cc

favicon.png
http://www.favicon.cc/

会員登録やツールのダウンロードなどが必要なく、ブラウザ上で簡単にファビコンを作成することができるツールです。
画面右にあるカラーチャートから色を選択して、画像中央にあるフレーム内でファビコンを作成します。
「preview」からプレビュー確認も可能です。

5.Favicon generator

Favicon_generator.png
http://favicon-generator.org/editor/

こちらも、会員登録やツールのダウンロードなどが必要なく、ブラウザ上で簡単にファビコンを作成することができるツールです。
機能が非常にシンプルですので、初めて使用する方でもすぐに使いこなすことができます。
ファビコン作成に慣れるまでの練習として、このツールを使用することをオススメします。

6.iconifier.net

iconifier.net.png
http://iconifier.net/

ブラウザ上でファビコンを作成することができるツールです。
あらかじめ、透過のPNG画像を作成しておく必要があります。

上のURLをクリックしたら、作成しておいたPNG画像を選択して「iconify」ボタンをクリックするだけで、16px × 16pxから512px x 512pxまでのサイズのファビコンが一発生成されます。
作成したいサイズを画面上で選択すると、指定したサイズのファビコンの詰め合わせzipファイルが生成されますので、ダウンロードして解凍すれば完了です。

7.半透過マルチアイコンfavicon.icoを作ろう!

favikon.png
http://ao-system.net/favicon/index.php

ブラウザ上でファビコンを作成することができるツールです。
こちらも、あらかじめ透過のPNG画像を作成しておく必要があります。

上のURLをクリックしたら、作成しておいたPNG画像を選択して「アイコンを作成」をクリックします。
背景色を選択して「アイコンダウンロード」をクリックすれば完了です。
非常に簡単に作成できますので、初心者の方にもオススメです。

まとめ

ファビコンは小さいながらもその存在感が大きいため、自社ホームページのシンボルとしてブランディングに一役買ってくれます。

今回ご紹介したツールは、どれも無料で使用できるものばかりです。
特に企業としてホームページを運営されている方は、作成環境などを考慮してツールを選択し、設置しておくようにしましょう。

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

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

このニュースに関連するカリキュラム

Illustratorを使ってファビコン(favicon)を作ろう

Illustratorを使ってファビコン(favicon)を作ろう

ファビコン(Favicon)とは、ウェブサイトのシンボルマークやイメージのアイコンのことを指します(「Favorite icon」を縮約したもの)。一番分かりやすいのが、ブラウザのタブやアドレスバーに表示されるアイコンでしょう。簡単に言うと、そのWebサイトの運営者が配置するシンボルです。今回は、次のステップでIllustratorを使ったファビコンの制作方法をご紹介します。