ファビコン(マルチアイコン)の制作

Favicon(ファビコン)とは、「シンボルマーク(アイコン)の制作」でも記しましたが、ウェブサイトのシンボルマークとして、サイトやページに配置するアイコンの事です。

マルチアイコンとは、複数サイズのアイコンが1つに集約されたもののことをいいます。

*.icoファイルの作成は、@icon変換や変換用のサイトで作成します。
@icon変換は、Windows用アプリケーションです。Macをお使いの方は、以下のサイトで、マルチアイコン化されたファビコンが作成出来ます。
今回は「西智子のホームページのアクセスアップ講座」の場合で、以下のサイトで解説していきたいと思います。

半透過マルチアイコン作成。
半透過マルチアイコン作成。無料で半透明マルチアイコンやファビコン(favicon.ico)が作れます。ギザギザの無い美しい影を持ったアイコンが作成できます。

*.icoファイル用の画像の準備

ファビコンのデザイン制作は、「シンボルマーク(アイコン)の制作」を参照ください。
アイコン(シンボルマーク)を、16×16pxサイズ、32×32pxサイズ、48×48pxサイズのpsdファイルで、3パターン作成します。
3パターンのアイコンをpng形式で保存します。下記でpngファイルにする方法を紹介します。

まずPhotoshopで、作成したファビコンを1つ開き、[ファイル]→[webおよびデバイス用に保存]を選択します。

下向き三角▼で[PNG-24]を選択して、[保存]を選択します。

ファイル名を付けて、任意のフォルダへ保存します。ここでは「favicon_16」というファイル名にします。

png形式で、フォルダへ保存されました。

残り2つのアイコンも、同様の手順でpng形式で保存します。

*.icoファイルの作成
では実際に、マルチアイコンを作成します。以下のサイトを開いてください。
http://www.ao-system.net/alphaicon/

下の画面が表示されます。まずは、同時に複数画像を指定していきます。
画像1の「参照」をクリックしてください。

作成したアイコンの1つを、ファイル名に指定して[開く]をクリック。

画像1の参照の右に、指定したサイズのファビコンの情報が出ます。
同様に、画像2の「参照」をクリックしてください。

作成したアイコンの2つ目を、ファイル名に指定して[開く]をクリック。

画像2の参照の右にも、指定したサイズのアイコンの情報が出ます。
同様に、画像3の「参照」をクリックしてください。

作成したアイコンの3つ目を、ファイル名に指定して[開く]をクリック。

画像3の参照の右にも、指定したサイズのファビコンの情報が出ます。
3つのファイルの選択を確認したら、[アイコン作成]をクリックします。

右側に選択した3パターンの画像と縦幅、横幅サイズが表示されるので、確認したら「アイコンダウンロード」をクリックします。

ファイルを保存するに指定して、[OK]をクリックします。

1つに集約されたマルチアイコンがダウンロードされます。
これで、「マルチアイコンの「favicon(ファビコン)」の作成方法」は終了です。

2014/04/18 13:50