faviconを作ってみたんだ

備忘録です。
いつもそうですが、自分のやっていることを記録としてとどめておくようにしています。
さて、今回はfaviconとかいうものを作りました。呼び方は日本ではファビコン、外国ではファブアイコンというらしいですがよく分かりません。これは、HPなどでタグやURLなどの左側にアイコンを見せるようにするものです。
どうすればいいのか？
まずはアイコンを作らないといけません。ということで、順番を書いておきます。
１、アイコンを正方形に作る。サイズはとりあえず適当でいい。
２，そのアイコンを１６×１６ピクセルにする。
３，ファビコン（favicon)のデータにする。（これはMicrosoftアイコンというらしい）
４，保存名もfavicon.icoとする。
５，このデータをホームページの直下に置く。（色々なやり方があるけど、一番楽な方法ということで。）
以上です。
これをOSXでやろうというのです。何を使うのか。それはなんとプレビューですよ。びっくりですね。
それじゃあ順番に行きますよ。（ちなみに今回はYosemiteのOSで新しいプレビューです。ver8.0）

 

---

１と２をやります。
アイコンはいつも使っているdoudesyo似顔絵アイコンです。ほぼ正方形です。これを１６×１６ピクセルにするにはどうするか。プレビューには画像解像度を変更することが出来るんですね。知らなかったです。

メニューバーにある、ツール＞サイズ調整を選択します。

すると下記のようなフローティングパレットが出てくるのでそこに１６ピクセル四方にします。解像度はモニターなので７２でOKです。


次に、変更したアイコンを書き出します。
３，ファビコン（favicon)のデータにする。（これはMicrosoftアイコンというらしい）

メニューバーの、ファイル＞書き出す...を選択します。
すると下記のようなダイアログが出てきます。フォーマットを選択するのですが、


下記のような種類のみしか出てきません。「Microsoftアイコン」というのをえらびたいのですが。

なんと、隠しコマンドがあるんですね。まったく、出来るんだから最初から表示するようにすればいいのにね！
さて、どうするのかというと上記のフォーマットを選択する時にキーボードのoptionキーを押しながらクリックすればいいのです。すると、

こんなに沢山の変換項目が出てきます。
この中にある上から６番目のMicrosoftアイコンを選びます。

４，保存名もfavicon.icoとする。
保存名はこのfavicon.icoのみです。他の名称はダメですよ。
５，このデータをホームページの直下に置く。（色々なやり方があるけど、一番楽な方法ということで。）
下記のようにこのデータをサーバーのホームページの一番最上階というか最初というか、index.htmlファイルと同じ階層においてください。


これで終了です。

さて、結果はどうでしょうか。


うまくいきましたよ。
URLのdoudesyo.iinaa.netと入れるとトップページのタグの「ほっと野鳥」の隣にアイコンが出てきました。

これはかなり古い表示方法だろうと思うのですが、私はいままでやったことがありませんでした。
ですので、新鮮ですね〜。(笑)