今更感がものすごく感じられますが、このサイトに(何だか分からない)Faviconを作って設置してみました。
せっかくなので、作業過程を簡単にメモっておきます。
Faviconとは
Faviconとはサイトを閲覧しているとブラウザのタブとかお気に入りに表示されるアイコンのことです。元々はIEの独自機能でしたが、今では大抵のブラウザが対応しています。
Favicon対応のブラウザはアクセスとすると、とりあえずサイトのルートディレクトリに「favicon.ico」というファイルがないか探します。このファイルがFaviconの画像データが入ったファイルなのですが、これを置いておかないとアクセスする度にファイルが要求されるのでサーバーには favicon.icoが見つからなかったという旨のログがぞろぞろ記録されてしまいます。このファイルは必須では無いため、ログの肥やしが平気であれば無視していても問題はありません。
サーバーのログには随分前から気が付いていた訳ですが、ようやく重い腰を上げた次第です。
やり方
表示させたい画像のデータをWindowsアイコン形式にて「favicon.ico」という名前で作成します。それをサイトのルートディレクトリに置いおけば、後はユーザーがサイトを閲覧した時にブラウザが勝手にこのファイルを見てくれます。
一般のブラウザはPNGとかGIFとかの画像形式でも対応するようですが、IEはアイコン形式一途なのでアイコン形式で作成します。アイコン形式にすると解像度違いのデータも一括して一つのファイルにできるので便利です。多くのブラウザは16×16ピクセルの画像サイズをFavicopnとして使用しますが、ショートカット等には大きなサイズも用意している方が綺麗に表示されます。
最近のブラウザはHTMLの<head>内にFaviconのパスとファイル名を記述しておけばそちらを優先してくれるそうです。サイト内で色々なFaviconを使い分けしたりする時には便利そうですが、このサイトには一つしか設置しないためHTMLは触りません。
画像データの作成方針
方針として複数サイズの画像データをアイコン形式で一つにまとめます。必要な画像サイズは16×16ピクセルですが、ショートカット等にもそこそこ綺麗に表示できるように下記の画像サイズを用意します。
- 16×16
- 24×24
- 32×32
- 48×48
- 64×64
色数は16色、256色、1600万色が利用できますが、ここではデータサイズがあまり大きくならないように256色とします。
なお、MacやWiddows Vista以降では画像サイズとして128×128や256×256にも対応するようですが、データサイズが大きくなるため64×64ピクセルまでとしました。
作業手順
作業手順としては次のようになります。
- 元画像を作成する。
- 元画像から縮小して各画像サイズを生成する。
- アイコン形式ファイルに書き出す。
- サーバーのドキュメントルートにFaviconファイルをアップロードする。
元画像の作成はInkscapeを使って行いました。元画像から所定のサイズに縮小とアイコン形式で書き出しにはGimpを利用しています。
元画像の作成
Favicon の元画像を Inkscape を使って作成します。Inkscape はベクターグラフィックを描くためのツールです。
この作業は最終的にビットマップに変換するため、Gimp等のビットマップベースの画像ツールでも問題ありませんが、修正がしやすいので Inkscape を利用しました。
小さいサイズの画像はあとで元画像を縮小するため、最も大きい64×64ピクセルで作成します。これには Inkscape のドキュメントサイズを64×64ピクセル設定します。
ビットマップ変換時の仕上がりを予想しやすくするため、グリッドサイズは1ピクセルとし、メジャーグリッドラインを4ピクセル毎に設定します。このようにするとグリッドの太いラインが16×16ピクセルに縮小した時のピクセルに相当します。
ペンツールなどで Favicon のイメージを描きます。その際、ストロークを設定するとピクセル間をまたぐ事になるため、ストロークは設定せずにフィルで塗り潰すとシャープになります。ただし、縮小する画像はどのようにしてもあまくなってしましいますので、ハイクォリティに仕上げたい方は画像サイズ別に元絵を作成した方が良いでしょう。
図柄が完成すると、「ビットマップマップにエクスポート」を使ってPNG形式で書き出します。なお、書き出し時に何か選択されているとそれだけが出力対象になるので注意してください。その場合はエクスポート領域の「ページ」ボタンをクリックすればOKです。
とりあえず、こんな感じになりました。一応ブログタイトルに含まれるレンズをイメージしました。本当はカメラのレンズを意味していますが、16×16ピクセル押し込めるにはかなり無理があるので一枚のレンズのイメージにしてみました。水晶玉のように見えますがこれはあくまでも1枚のレンズです・・・。
スクリーンショットは完成したところです。ズームの関係でメジャーグリッドしか見えていません。
Inkscapeで元絵を作成
縮小画像生成
作成した元絵を Gimp で開きます。他のアプリケーションでも問題ありませんがWindowsアイコン形式で出力する機能が必要です。
今回は5種類の画像サイズを用意するため、レイヤーを複写してその枚数分に増やします。そして分かりやすいようにレイヤー名を変更しておきます。
レイヤーは上のものほど小さいサイズにします。名前を変更し終わったレイヤーは下記のようになります。
Gimpで縮小画像作成1
続いてレイヤーの縮小・拡大」コマンドを使ってそれぞれの解像度に合わせて縮小します。このコマンドを実行するとレイヤー中心に向かって指定サイズに縮小されます。最後のレイヤーは64×64ピクセルのまま縮小する必要はありません。作業が終わると下図のようになっているはずです。
Gimpで縮小画像作成2
レイヤーはこんな感じに。
Gimpで縮小画像作成3
縮小率が高い16×16のデータについては酷い状態になる事があります。その時はここで手作業にて修正します。
アイコン形式ファイルに書き出し
Gimpでフルカラーのままアイコン形式で書き出すとディザが入るようで、ざらつき感がでることがありました。そのため、書き出す前に予めカラーモードをインデックスカラーに変更した方が良いかも知れません。予め手動でやるとディザの有無は選択できます。
なお、縮小前にインデックスカラーに変換すると、縮小画像のエッジにギザギザが目立つ事があるので縮小後に変換した方が良いでしょう。
「エクスポート」コマンドでダイアログを開き、「Micro Soft Windows アイコン」形式を選択して書き出します。各レイヤー毎に色数が選択できるのですべて256色パレットを指定します。PNG圧縮を指定するとファイルサイズが小さくなりますが、圧縮しなくても十分小さいため圧縮なしで書き出しました。
ファイル形式を変更してもファイル名の拡張子は自動で変わらず、自分で ico に変更する必要がありました。ちょっと不親切。
Gimpで縮小画像作成4
最後に必要があれば「名前を付けて保存」コマンドで Gimp 形式で保存するとレイヤー状態も含めて残しておけます。
Faviconファイルをアップロード
アップロードする前に、書き出したアイコン形式のファイル名を「favicon.ico」に変更しておきます。これを忘れると「あれっ?」という事になります。
サーバーのドキュメントルート(public_html等、サーバーの設定によっては別の名前になっているかも)直下にFTP等でアップロードします。これで作業完了です。
ちなみに今回製作した favicon.ico のファイルサイズは15.9kバイトでした。
早速ブラウザでアクセスすると・・・できました(嬉。でもなんだかよくわからない(泣。
良い図案が思いつくまでこれで行きます。
Faviconが付いた