主要なウェブサイトにアクセスすると、ブラウザのアドレスバーの左側にアイコンが表示されることがほとんどです。この小さな画像はファビコン（お気に入りアイコン）と呼ばれ、少し手間をかければ自分だけのファビコンを作成できます。
アイコンをデザインする
ファビコンは 16 x 16 ピクセルのサイズしかないため、デザインが難しい場合があります。画像や複雑な会社ロゴは、このような小さなサイズに縮小すると認識できなくなるため、名前の頭文字や会社ロゴのグラフィック要素 1 つなど、シンプルで、そして象徴的なものを考案する必要があります。ファビコンはどの画像エディタでも作成できますが、この例では Adobe Photoshop CS4 ( ) を使用します。また、アンチエイリアス エッジのフルカラー アイコンを可能にする新しい .png 形式でファビコンを生成します。ファビコンは、ブックマーク リストや RSS フィードでの使用を考慮して 16 ピクセルの正方形よりも大きくすることができますが、この記事では、ブラウザーのアドレス ウィンドウに表示されるファビコンを作成する方法に焦点を当てます。
まずは大きなファイルから始めて、16×16ピクセルに縮小するのがベストです。Photoshopで「ファイル」→「新規」を選択し、ピクセルサイズを512×512、ピクセル/インチを72ピクセル、背景を透明に設定します。「OK」をクリックしてファイルを作成し、「Photoshop」→「環境設定」→「ガイド・グリッド・スライス」を選択します。「グリッド」セクションまで移動し、グリッド線を32ピクセル間隔で1つの細分で表示するよう選択します。「OK」をクリックして変更を確定し、「表示」→「表示」→「グリッド」を選択します。16×16のグリッドが重ねられた空白の画像ファイルが表示されます。ご想像のとおり、これらのグリッドの1つの正方形は、最終的なファビコンの1ピクセルに対応しています。
ファビコンをデザインする際は、グリッドラインに沿って、すっきりとしたデザインにしましょう。水平方向と垂直方向のエッジがグリッドから外れると、ぼやけて不明瞭な印象を与えてしまいます。グリッドの各マス目は、縮小すると1ピクセルにまで縮小されるため、あまり細かく描き込みすぎないようにしましょう。
アイコンをアップロードする
デザインが完成したら、念のためファイルを複製し、Photoshopで開きます。「イメージ」→「画像サイズ」を選択し、16×16ピクセルのサイズを入力します。画面下部にポップアップメニューが表示されるので、「バイリニア」を選択して「OK」をクリックします。これで、ファビコンが適切なサイズで表示されるはずです。
Web用のアイコンのエクスポートは簡単です。「ファイル」→「Webおよびデバイス用に保存」を選択し、「プリセット」ポップアップメニューから「PNG-24」を選択します。「保存」をクリックし、ファイル名に「favicon.png」と入力して、もう一度「保存」をクリックします。Finderでファイルを探し、「favicon.ico」という名前に変更します。Finderでファイル拡張子の変更を確認するメッセージが表示されますので、「.icoを使用」をクリックして続行します。
最後のステップは、ファイルをウェブサイトにアップロードすることです。FTPプログラムを起動し、ウェブサイトのルートディレクトリ（通常はホームページ（home.html、index.html、またはindex.shtml）があるディレクトリ）に移動します。このディレクトリにfavicon.icoファイルをアップロードすれば、準備完了です。ウェブブラウザでホームページにアクセスすると、アドレス欄のウェブアドレスのすぐ横に新しいファビコンが表示されます。ファビコンを確実に表示したい場合は、ページのheadセクションに次のコードを追加してください。
このアップロード手順は比較的一般的ですが、サーバーの設定によってはファビコンが表示されない場合があるため、これらのアップロード手順がうまくいかない場合は、ISPに問い合わせて特別な指示を仰いでください。
上記で説明したアイコン作成テクニックは、画像エディタを使い慣れている方に最適です。そうでない方でも、様々なオンラインリソースを使って簡単にファビコンを作成できます。これらのリソースでは、アンチエイリアスなしではファビコンの色数は256色に制限されますが、使いやすさを考えると妥当な選択肢です。Favicon.ico Generator、FavIcon from Pics、Favicon Generator、Favikonなどのウェブサイトでは、コンピューターからアップロードした画像からファビコンを作成できます。PhotoshopのICO（Windows Icon）ファイル形式プラグインも検討してみてください。このプラグインを使えば、Photoshop内で直接ICO形式で保存できます。ただし、元の画像が縦横256ピクセルを超えていないことを確認する必要があります。
ファビコンは、ウェブサイトをより記憶に残すための、視覚的なアクセントとして役立つ貴重なアイテムです。訪問者に視覚的なヒントを提供し、ウェブサイトにさりげない洗練さを加えます。しかも、作成は驚くほど簡単です。
クリス・マクベイは、ノバスコシア州ハリファックスを拠点とする作家、イラストレーター、おもちゃの写真家です。
