この章では、制作したWebサイトにオリジナルのお気に入りアイコンを設定する方法をご紹介します。お気に入りアイコンは、Photoshopで16x16ピクセルで描いた画像を、256色の.icoというフォーマットに変換して作ります。
それではまずPhotoshopを開き、アイコンの絵を自由に描きましょう。カンバスサイズは16ピクセル×16ピクセルで開きます。
レイヤーパネルの背景レイヤーを通常のレイヤーに変換し、Ctrl+aで全体を選択し、Delキーで削除してしまいましょう。これで全体が透明色になったはずです。
ここから図形ツール等を使用して描きましょう。
アイコンの絵が描けたら、「Webおよびデバイス用に保存」で、PNG-8形式で透明部分のチェックボックスにチェックを入れて保存します。この時、マット色には薄いグレーを指定しておきましょう。ブラウザのタブの色に馴染む色にします。ファイル名はfavicon.pngとしておきましょう。
次に、ブラウザで下記のURLを開きましょう。
画像ファイルは、今作ったfavicon.pngを指定し、オプションは「16pxにリサイズ」、「減色しない」のセレクトメニューは、「256色に減色」を選択して、最後に「アイコンを作成」ボタンを押します。保存した.icoファイルをfavicon.icoに名前変更して、ご自分のサイトのルートフォルダに移動しておきましょう。
Dreamweaverでアイコンを設定したいHTMLファイルを開き、<head>～</head>内に以下の構文を追加します。
<link rel="shortcut icon" href="favicon.ico" />
favicon.icoへのパスが正しければ、FireFoxでブラウザプレビューしたらお気に入りアイコンが設定されているはずです。IEではブラウザ内のキャッシュの関係ですぐには反映されないケースがありますが、気にする必要はありません。何らかのタイミングでお気に入りアイコンが更新されるはずです。
