誰でも簡単に自サイトのfavicon(ファビコン)を作成する方法

favicon(ファビコン)とは、ブラウザのアドレスバーやタブなどに使われるアイコン画像のことです。たとえば当サイトのファビコンはこんな感じですね。

今回はこのファビコンの簡単な作り方をご紹介します。

「favicon(ファビコン)」の作成手順

ファビコンの作成手順は大きく分けて全部で三工程あります。

  1. サイズの決定
  2. 画像の作成
  3. マルチアイコンの作成

サイズの決定

まず作成するファビコンのサイズを決定します。と言うのも、使用されるユーザーの環境によってファビコンのサイズはまちまちなのです。サイズは基本の基本のようですが、実は色々な表示サイズがあるため特に最初は困惑する部分かと思います。実際、自分の時がそうでした。以下が比較的よく利用されるファビコンのサイズの一例です。

  • 16px × 16px:IE(Internet Explorer)のタブで使用されるサイズ
  • 24px × 24px:IE9の「ピン留め機能」で使用されるサイズ
  • 32px × 32px:Chrome、Firefox、Safariなどのタブで使用されるサイズ
  • 48px × 48px:Windowsのサイトアイコンで使用されるサイズ
  • 64px × 64px:高解像度のWindowsサイトアイコンで使用されるサイズ

他にも、現在では20以上のファビコンのサイズがあるらしいです。
お願いだから規格を統一してください。

というわけでして、これを読まれた方は「じゃあサイズをどうすればいいの?」とますます混乱してしまうかもしれませんが、個人的な結論を先に申し上げますと16×16と32×32の2パターンあれば十分です。それで主要なブラウザはほぼカバーできます。あんまり沢山作っても大変ですし、ファイルサイズも大きくなってしまいます。(32×32だけでもいいのですが、たまに上手く縮小されないことがあるので16×16もあった方がいいです)

ですので、ファビコンのサイズは16×16と32×32の2パターンを用意しましょう。

画像の作成

サイズが決まったら、次は実際に画像を作成します。AdobeのIllustratorなどがあればそれを使って下さい。「そんな有料ソフト持ってないよ」という方は、無料のソフトをダウンロードして使用して下さい。個人的には『Inkscape』が無料で機能も充実しておりオススメです。

ファビコンのデザインですが、特にこだわりがなければ背景は単色で塗りつぶし、そこに見やすい色でサイトの頭文字などを中央に配置しましょう。非常に簡単で、かつそれっぽく見えるようになります。32×32のサイズで作ったら、それをそのまま縮小し16×16を作ります。拡張子はpngでいいでしょう。

ちなみに自分の場合、サイトの名前は「ワナビー」ですが、カタカナで「ワ」にしたら「ク」と見分けがつかなかったので、ひらがなの「わ」にしました。

マルチアイコンの作成

画像が2つ用意できましたら、それを一つにまとめます。これをマルチアイコンといいます。ですが、難しいことはありません。元になる画像を用意すれば、マルチアイコンはWEB上ですぐに無料で作成できます。
具体的な手順としては、まずマルチアイコン作成サイトにアクセスします。

次に先ほど作成した二つの画像を順番に選んで、最後に「アイコン作成」をクリックします。すると自動でマルチアイコンが生成されます。

マルチアイコンが出来上がったら、ダウンロードしましょう。以上で現在の主要なブラウザにしっかりと対応した立派なファビコンの完成です。お疲れ様でした。

まとめ

簡単なファビコンの作り方、いかがでしたでしょうか。今回はなるべく簡単に作れるようデザインも極めてシンプルなものを紹介しましたが、なれてきたらご自身で凝ったものを作られても面白いと思います。ファビコンはある意味サイトの顔になるものですし、実際ブラウザのタブに自分が一生懸命作ったファビコンが表示されたら、それだけで嬉しいものですよ。