Favicon(ファビコン)を作成するならドット絵ツール「EDGE」が圧倒的に便利

 オリジナルのファビコンを簡単に作成するならドット絵ツール「EDGE（エッジ）」を使用するのが便利です。自分のように絵を書くのが苦手な人でも、ある程度は様になるファビコンを自作することが可能です。因みにこのサイトのファビコンも私が自分で作りました。

ドット絵で作成するメリットは「簡単」「お洒落」というのもありますが、それ以上に「奥の深さ」があると思います。極めて行けば非常に高クオリティのファビコン作成も可能です。

ファビコンは自分のサイトの象徴にもなるものなので、できるだけ自作にこだわりたいですよね。この記事では「EDGE」を使用してオリジナルのファビコンを作る基本的な方法を紹介していきます。

ドット絵作成ツール「Edge」のダウンロード

まず「Edge」をダウンロードしましょう。下記のページから無料ダウンロードできます。

「Edge」ダウンロードページ

「Edge」によるファビコン作成方法

ダウンロードしたファイルを解凍したらフォルダ内の「edge.exe」を開きます。開いた画面の左上の「ファイル」から「新規作成」をクリックします。

作成する画像の大きさ等を設定できます。

ブラウザ上のファビコンの表示サイズは「16px × 16px」なのでいきなりそのサイズで作成しても良いのですが、それだと1マスあたりの面積が大きくなり味のない絵になってしまうので、倍の「32px × 32px」で作成しています。

左は16pxで右が36px 大きいほうがマスが増えるので細かい絵が書ける。

勿論より細かいドット絵を作成したい方は「64px × 64px」「128px × 128px」などでも大丈夫です。ただし必ず縦横1：1の比率で作成しましょう。最後にリサイズした時に比率がおかしくなるので。

初期状態だとグリッド線が表示されていませんが、拡大することで表示されます。「32px」にした場合は8倍にズームすれば線が出ます。

描画方法を使い分ける

実際に絵を書いてみましょう。何種類か描画方法を選択できます。

上記の画像は左から、

• 自由曲線
• 直線
• 長方形
• 長方形（塗りつぶし）
• 円形
• 円形（塗りつぶし）
• ベジエ曲線
• ぼかす
• 文字列の描画
• スプレー
• 塗りつぶし

となっています。個人的には直線と長方形ぐらいしか使用しません。ここは描きたい絵によって使い分けましょう。

気持ち悪い絵ですが、こんなことができますよという例。

グラデーションを活用する

ファビコンの背景にグラデーションを使用すると、比較的簡単にお洒落感を出すことができるのでおすすめです。

 カラーパレットを開きます。

一番左上がグラデーションの基本の色になるので、左上を選択して基準となる色に変更します。今回は青を基準としてグラデーションを作成するので、左上を青に変更します。

下部のスライダーを動かして任意の色にできます。

メニューの「パレット」内にある「グラデーション作成」をクリックします。

カラーパレットに選択した色のグラデーションが作成された筈なので、使用していきましょう。

実際に背景として書いてみました。このぐらいの背景なら簡単に作成することができます。この上に文字を書いてみたり、キャラクターを書いたりすると映えると思います。

これは私が実際に作成して、当サイトでも使用しているファビコンです。こうして拡大するとかなり雑な感じですが、実際にファビコンとして小さく表示されると結構様になってしまうのがドット絵の良い部分です。結構お気に入りです。

作成した画像を保存する

「ファイル」→「名前をつけて保存」をクリックします。

「ファイルの種類」は「PNG形式」がおすすめです。この後に作成した画像を変換することになりますが、変換するサイトによっては形式にPNGを指定している場合も多いからです。

またPNGは透過処理にも対応した形式ですので、取り敢えず選んでおけば間違いないでしょう。

背景が透過のFavicon(ファビコン)を「EDGE」で簡単に作る方法

作成した画像をアイコン形式（.ico）に変換する方法

ファビコンを実際に使用する場合は拡張子が「.ico」でなければならないので、ファイルを一度変換する必要性があります。一応EDGEでもサイズを縮小してから.icoで保存することができるのですが精度があまり良くありません。

ネット上で手持ちの画像を無料でアイコン形式に変換してくれるサービスがあるので、そちらを利用して変換をする方法を紹介していきます。

「Favicon Converter」にアクセスします。無料のファビコン変換サービスです。

「参照」をクリックして作成したファビコン用画像を選択します。オプションで変換するサイズの変更などが行えますが、基本的にはそのままで問題無いです。

ファイルを選択できたら「アイコン作成」をクリックしましょう。

変換された画像がダウンロードされたはずです。これで晴れてファビコン作成が終了しました。変換した画像はそのままファビコンとして使用することができます。

作成したファビコンを自分のサイトで使用する方法

別の記事に解説をまとめたので、お手数ですがそちらを参照してください。

サイトにFavicon(ファビコン)を設定する方法

まとめ

いかがでしたでしょうか。「EDGE」でのファビコン作成は簡単に高品質のものが作れますし、何より作っていて楽しいです。ファビコンというのはある意味ではサイトの象徴にもなるので、こだわって自作のものを使用したいという人にはピッタリのツールであると思います。