Webサイト制作講座
ファビコン
ふぁび……コン？
ファミコンの仲間かなにかですか？
ふぁ、ファ……ファビリーコンピュータ！！！
はいはい、ベタすぎベタすぎ……てか、あなた何歳よ……。
ファビコンっていうのは、Webサイトを『お気に入り（ブックマーク）』なんかに登録した際に、よく登録名と一緒に表示されるアイコンのこと。↓こんなのね。
favorite（お気に入りの） icon（アイコン）――略してファビコン（favicon）といいます。
ブラウザによってまちまちだけど、ブックマークだけでなく、ページタイトルやURLの横に表示されることもあります。
なるほどぉー。
ファビコン……なんだか格闘ゲームに出てきそうですね！
「やっべー、やっぱファビコン超ムズイわー」みたいな。
……もういいからお黙りなさい、このゲーム脳！
はーい。
それで、これになんの意味が？ 自己顕示欲ってやつですか？
ブックマークの中からお目当てのサイトを探す際には、やっぱり独自のアイコンを利用してあるほうが見つけやすいでしょ？ まあ、オリジナリティを出すという意味では、自己顕示欲もあながち間違いではないけど……。 ブックマークしてくれるような人は、つまり常連さんなわけで、そういう人に少しでも利用しやすいように――っていう気配りにもなるんじゃない？
ちゃ、茶子先生……まさかそこまで考えてたなんて……。
自分が間違ってたっす！ 目からウロコっす！！
それじゃさっそく、そのファビコンってやつを設置しましょう！ Let's セットプレイ！
セットプレイってあなた……まあ、いいわ。
実際のところ、HTML側は↓のように1行加えるだけでＯＫです。
ちなみにfavicon.icoへのパスは絶対でも相対でもかまいません。
なんだ、簡単じゃないですか！
それじゃさっそく――ってこのicoって拡張子の画像はどうやって作るんですか？
私が愛用するフォトショップエレメンツに、そんな拡張子ないですよ？ 不具合発見！？
こらこら、恐ろしいこと言うんじゃありません！
エレメンツに限らず、フォトショップはもともとicoデータは対応していません。
そ、そんな……！
それじゃあ、私にどうしろと……？
フォトショップの場合はicoデータを利用できるプラグインがあるので、それを使ってもいいのだけど……。 それだとフォトショップそのものを持ってない人は利用できないので、今回はフリーの画像編集ソフトGIMPを用いて作成例を示してみましょう。
ファビコンをGIMPで作成してみる
まずはGIMPをダウンロードします。
他にメインで使っている画像編集ソフトがあるならポータブル版を。
それ以外ならインストーラー版がいいんじゃないかしら。
ダウンロード完了しました！
起動するであります！
そうしたらまずは、【ファイル】→【新しい画像】から32×32ピクセルの新規キャンバスを作成します。 サイズもサイズだし、別に印刷されるわけでもないので、dpiは特に気にしなくてもいいでしょう。
32×32ピクセル？ 絵を描くの面倒じゃないですか、これ。
もしかして、私のドッター魂が試されてる！？
icoデータそのものは、もっと大きいサイズでもいいですが……。
ファビコンの場合、これ以上のサイズが使われることはほとんどないし、解像度を大きくすればデータサイズも大きくなりますから。今のところはこれで事足りるでしょう。
絵は適当に大きめに――例えば100×100ピクセルで作っておいて、それを縮小してもそれっぽくなりますよ。あんまり小さいとつぶれちゃうけど……。
ふむふむ……それじゃあ、この私の自画像を縮小して……。
さらば！ 私のドッター魂……！
32×32ピクセルのキャンバスに、32×32ピクセルと16×16ピクセルのレイヤーを設置するような感じで……。
えーっと……こうで……ああで……。
でけた！ こんな感じですか！？
ん……問題なし。よくできました。
あとは拡張子.icoになるように保存していきます。
まずは【ファイル】→【名前を付けて保存】を選んで、画像保存設定を行います。
名前は特にこだわりがないならfavicon.icoでいいでしょう。
あとは【ファイルタイプを選択】→【Microsoft Windows アイコン】を選択してください。
これで【保存】します。
保存完了！
これで完成――ってあれ？ 私の前に新たなウィンドウが立ち塞がった！？
あー、それはよくわからないなら初期設定のまま保存でいいですよ。
推奨は【8 bpp、1 bit アルファ、256 色パレット】以下の設定ですが……まあ、古代種のパソコンでもない限りは特に問題ないはずです。
それじゃあ……ポチッとな。
これで――これで完成！？ これで私はファビコンマスター！？
ん……完成。
ファビコンマスターは……名乗りたければ名乗るがいいわよ。
それはともかく、完成したものをもう一度GIMPで開いて確認してみて？
お、おお……こんな風になるんですね！
あっ！ 私の付けたレイヤー名をGIMPのヤロウ、勝手に変えてくれちゃってます！！
まあ、別にどうでもいいんですけどね！！！
何を勝手にキレてるの……。
GIMPはこうしてicoデータも開けるから、気になるアイコンがあったら開いてみるといい勉強になるかもね。
私のファビコンマスターへの道程は、まだ始まったばかり――！
………今、バラモス倒したくらいですかね！？
せ、せやな……。
まあだけど、これで当講座のファビコンについては終了ー！
んじゃま、そういうことでお疲れさま～。あー、仕事のあとはお茶が美味しい……。
はい！ お疲れさまでしたー！
