FireworksでFaviconを作ろう!

Apr 26, 2010

「Favicon作るなら、Fireworksでしょ!」
と、8年くらい前から思っています。
今回は簡単にFaviconを作る方法を紹介します。

Faviconとは?(Wikipediaより)

STEP01. 新規作成(Ctrl+N)してカンバスサイズを調整

下図のように、16×16pxの大きさに設定します。

STEP02. 描きます。

はい、描いてください。
たった16×16=256個のドットの中に描くアイコン、とても奥が深くて楽しいです。

STEP03. 描いたら保存

描き終わったら、PNGか、GIF形式で保存してください。

STEP04. ICO形式に変換

Faviconは、ICOという特殊なフォーマットを使用しています。
そのため、PNGやらGIFやらで保存したデータを、ICO形式に変換する必要があります。

変換する方法はいろいろありますが、
個人的に一番使いやすいと思っているのが、これ。
Favicon Japan!! -ファビコン作成方法-
上記リンク先の、ページ下の自動生成ツールを使用すれば、
作成したアイコンを簡単にICO形式に変換出来ます。
無事ICO形式に変換出来たアイコンは、「favicon.ico」という名前に変更するのを忘れずに。

STEP05. あとは、設置するだけ!

設置には、若干のhtml知識が必要ですが、それほど難しくありません。
以下のサイトに非常に分かりやすく設置方法が記載されています。
Favicon Japan!! -ファビコン設置方法-

いかがでしたでしょうか。
Fireworksを使用して、ぜひスマートにFaviconを作ってみてくださいね。

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

課長島耕作が社長になるまで見届けてしまった