Favicon(ファビコン)を作成するならドット絵ツール「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は透過処理にも対応した形式ですので、取り敢えず選んでおけば間違いないでしょう。

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

無料のWEBサービスが多く存在するので今回はそちらを利用します。ソフトをインストールする必要が無いのがメリットです。今回は「Favicon Generator」というサイトを使ってみました。

やり方に特に難しいところもありません。変換したい画像（今回なら先ほど作成したもの）を「参照」から選択し、「ファビコン作成」を押すだけです。サイズは今回は16×16を選択しましたが、ブラウザによってファビコンの表示サイズが異なるようなので32pxなども作成しておくと抜かりがないかもしれません。

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

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

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