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

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

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

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

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

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

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

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

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

screenshot_19

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

screenshot_07

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

screenshot_06

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

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

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

screenshot_08

描画方法を使い分ける

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

screenshot_11

上記の画像は左から、

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

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

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

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

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

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

screenshot_13

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

screenshot_20

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

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

screenshot_15

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

screenshot_16

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

screenshot_17

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

screenshot_18

作成した画像を保存する

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

screenshot_44

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

screenshot_45

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

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

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

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

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

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

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

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

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

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

まとめ

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

  • ドット絵ツールのファビコン作成は簡単かつお洒落である
  • 直線・長方形・円形を駆使しよう
  • グラデーションを背景に使うと一気にお洒落(っぽく)なる

SNSでもご購読できます。