Favicon（ファビコン）とは、「シンボルマーク（アイコン）の制作」でも記しましたが、ウェブサイトのシンボルマークとして、サイトやページに配置するアイコンの事です。
マルチアイコンとは、複数サイズのアイコンが1つに集約されたもののことをいいます。
*.icoファイルの作成は、@icon変換や変換用のサイトで作成します。
@icon変換は、Windows用アプリケーションです。Macをお使いの方は、以下のサイトで、マルチアイコン化されたファビコンが作成出来ます。
今回は「西智子のホームページのアクセスアップ講座」の場合で、以下のサイトで解説していきたいと思います。
http://www.ao-system.net/alphaicon/
*.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