Favicon（ファビコン）の作り方とブログへの設置方法

ホームページを開いたときにホームページアドレスの左に小さな画像が表示されていることがあります。これは Favicon（ファビコン） と呼ばれるものでFavorite icon（フェイバリット・アイコン）、即ちお気に入りのアイコンと言う意味の英語を略したものだと言われます。

本ブログのファビコン

勿論ホームページだけでなくブログでも設置可能です。本ブログでもマスコットキャラクターのはなまる君をファビコンに仕立て上げてみました。右上の図がブラウザのIE（インターネットエクスプローラー）で本ブログを開いたときに見られるはなまる君ファビコンです。

ファビコン用の画像を用意する

本記事ではこのはなまる君ファビコンの作り方と設置方法を記します。先ずは画像を用意します。この時用意する画像は…

16px×16pxの画像が最低一つは必要です。最低と言うのはファビコンにはいくつかの大きさのアイコンを含ませることが出来るからです。これを マルチアイコン と呼ぶことがあります。基本的には以下の3種類のサイズが良く使われます。使われ方と共に記します。

16px×16px：Webブラウザ
32px×32px：WindowsXPデスクトップショートカット、プロパティ
48px×48px：Windows Vista以降のデスクトップ標準設定アイコン

16px×16pxはWebブラウザのアドレスバーの左に表示されることになりますから先ずは必須のサイズと言えるでしょう。

今回は本ブログに於いては

16px×16px：
32px×32px：

の2種類を用意しました。また機会があれば48px×48pxを加えたバージョンアップを図りたいと思っています。

なお画像エディタを持っていなくても Web上には写真などをファビコンに変換してくれるサービスも多く見付かりますのでその様なWebサービスを探してみるのも良いでしょう。

ファビコンの特徴

ひとつには上に書いたマルチアイコンがあります。勿論16px×16pxの画像ひとつだけでもファビコンは作成可能です。

マルチアイコンに於いてはそれぞれのサイズのアイコンを別々の画像にすることが出来ます。小さなアイコンは人の顔でも大きなアイコンは家や自動車の画像でも構わない訳です。

用意したサイズが見るパソコンの規定のサイズより大きい場合は画像の大きさは自動的に縮小されます。但し自動的に縮小された画像は恐らく見た目が思った通りには行かないでしょう。画像エディタなどを使って大きな画像を小さく縮小したことがある方は分かると思いますが、細部のディテールがつぶれてしまうのですね。従って小さな画像、特に16px×16pxの画像などはそれ様に用意した方が綺麗に見えます。ファビコンの主な用途であるWebブラウザに於いては大抵は16px×16pxの画像を用意しておけば問題はないでしょう。

ファビコンを作成する場合、透過情報を持つGIFやPNGなどのファイル形式で作成すれば表示の際、拡大縮小がされなければ透明、半透明な部分はそのまま反映されます。今回本ブログ用に用意したファビコンは16pxのものも32pxのものも PNGファイルで作成しました。ブラウザでご覧の方ははなまる君の顔の周りが背景に溶け込んでいるのを分かっていただけると思います。

ファビコン作成定番ツール@icon変換

画像エディタなどで自分でアイコン画像を幾つか用意したらそれを拡張子が.iconであるひとつのファイルのまとめなければいけません。これには変換用のツールが必要ですがWindowsには幾つかこのようなソフトウェアがフリーで提供されています。

中にも @icon変換は、ファビコンを作るときには欠かせない大定番のようでネット上を検索してみれば様々なサイトで評判が高いのを見られます。サイト上のリード文には

Vista形式、PNG、透過マスク、アルファチャンネルなどに対応した、画像とアイコンの相互変換ソフト。 favicon作成にも。

とあり、ファビコン作成には打って付けのソフトウェアであることを覗わせます。「@icon変換」 v1.21 (2007/02/04) という説明ページ（ダウンロードファイルにも含まれています）も用意されています。本ブログでも採用させて貰うことにしました。

ダウンロードリンクに用意されているのは version 1.21で2007年2月4日に最終更新されているのもです。手元の環境のWindows7でも問題なく動作しました。利用したのはZIPファイルの方でダウンロードの後、解凍します。解凍フォルダの中には aicon.exe がありますのでこれをダブルクリックで起動します。

マルチアイコンをひとつのアイコンファイルにする

起動した@icon変換に用意した二つのアイコンをドラッグ＆ドロップしたのが下の図です。ドラッグ＆ドロップでなくてもメニューの File から Open を選択しても同じように用意したアイコンを取り込めます。

画面左側には取り込んだアイコンの名前やサイズなどの情報が1行づつに、画面右側には左側画面で選択して青くなった行のアイコン画像が表示されます。ここでちゃんと画像が取り込めているか確認しましょう。

画面左側の行はメニューにある上と下を向いた二つの青い矢印をクリックすることで順番を入れ替えることが出来ます。（矢印の色は行を選択しないと青くなりません。）この機能を使ってサイズの小さなアイコンを下に配置しました。

アイコンの情報行は複数選択することが可能です。 Shiftキーを押しながらクリックしても複数選択出来ますしマウスをドラッグして一辺に選択することも出来ます。

アイコンを複数選択すると上の図の様にメニューの File 下層から Save as Multiple Icon ... が選択出来るようになっています。これを選択するとマルチアイコンのファビコンが作成されます。

本記事では作成したファビコンの名前を hamanaru.ico としましたが、基本的には favicon.ico とした方が良い場合があります。

ファビコンをブログに設置する

ホームページなどではサーバーソフトの設定に依ってトップページと同じ階層に favicon.ico と言う名前でファビコンをアップロードするだけで確りブラウザのファビコンに表示される設定もあります。

但しその設定がなされていない場合は専門的知識が必要で更にはブログではほとんど対応しているブログシステムはありません。従ってファビコンに対するリンクを貼ってやる必要があります。

ブログシステムでは画像以外がアップ出来る機能があればそのアップロードしたアドレスへ、自分で運用しているホームページスペースがあればそこへアップロードしたアドレスへリンクを貼ってやればいいことになります。

本記事では下のような書き方となりました。

このコードをブログテンプレートの <head>と</head>の間に貼り付けます。これで設置作業は完了です。ブラウザでファビコンを設置したブログを開いてみましょう。アドレスバーやタブの左に表示されているアイコンがお馴染みの無味乾燥なブラウザお仕着せのものから自分で用意したものに変わっていれば成功です。

なお、ファビコンの表示はブラウザの設定等に依って直ぐには反映されないこともあり、お気に入りには再び入れ直さないと見られないこともありますのでご注意下さい。