ブログ練習帳

favicon？ファビコンってなに～

やっぱりファビコンなきゃね！といわれました。え、ファビコンって何？です。80年代に大ブームを巻き起こした、白と小豆色がまぶしい家庭用テレビゲーム機を思い出してしまいましたが、どうやら違うようです。

ファビコンって、フェイバリットアイコンの省略で、ブラウザのURLの横とか、お気に入りのところにでるちっちゃい画像のことでした。ふぅん、お気に入りのアイコンって意味だったのかぁ、と納得したところで、わたぴもつくってみたいぃということになりました。

手順は、大きく分けてふたつ。

1. ファビコン用の画像を作る
2. HTMLコードにファビコン用の記述をする

まず、ファビコン用の画像を作ります。ファビコンは縦横16pxの画像で、拡張子がicoになります。もとのデータはPhoto ShopやFire Worksで作れますが、そのままではキチンと反応してくれません。とくに、IEだと、このあたりがとっても厳しいようです。ファビコン用にファイル形式を変換します。オンラインサービスでファビコン用画像を作成してくれるものもありますが、なぜか失敗してしまいました。ホントなら、きちっと原因追求して、「シャキーん」と理解したいところですが、覚えることいっぱいでいつもおシリに火がついている見習いは、もっと簡単にできる方法はないかとさっさと逃げ出しました。

＠icon変換というフリーウェアを利用しました。これはダウンロードして展開して使うだけで、うまくいきました。とりあえず、Fire　Worksで作った正方形の形のファイルをPNG形式で保存して、それをこの＠iconで変換して保存するだけです。で、保存するときは、ファイル名をfavicon.icoとしておきます。

これをHTMLに埋め込みます。ファビコン設置には、ヘッダー内にリンクを設定してやるだけです。たとえば、ルートにfavicon.icoをおいた場合、

XHTML

<link href="favicon.ico" rel="shortcut icon" />

と書き込むだけです。これで、ファビコンファイルとかいろいろもろもろをFTPでアップしたら、うーん、いいではないか。いいではないか。ちょっとおしゃれになった自分のサイトを眺めては、悦に入ってる見習いです。

2011年11月3日5:55 PM| カテゴリー： 見習い奮闘記| コメント (0)