ブックマークやブラウザのアドレス欄に表示されるアイコン、いわゆる「favicon」(Favorite Icon)を作って設置してみました。ソフトを用意するのが面倒だったので、使用する画像以外はすべて無料のWebサービスですませました。IEとFirefox、Operaでちゃんと表示されています。
手順自体は別に何も難しくないのですが、少々手間取ったことがいくつかあったので、情報をまとめてエントリにしておきます。
正しいfaviconの作り方
具体的な手順は以下のとおりです。
- 画像を用意する
- icon形式に変換(省略可)
- faviconをアップロードする
- HTMLのヘッダ部分(テンプレート)にタグを書き込む
- 完成
見てのとおり手順は少ないですし、多分画像が手元にあれば10分ぐらいで完成すると思います。ただそれで終わりではエントリを起こした意味がないので、個別に解説していきましょう。
1. faviconに使う画像を用意する
faviconに使えるフォーマット
faviconに使用できる画像フォーマットは一般的に「JPG」「GIF」「PNG」です。「BMP」も使用可能ですが、できれば「PNG」や「JPG」などのファイル容量が小さくなる形式に変換しておいた方がいいでしょう。
画像のフォーマットではないですが、Windows用のアイコンフォーマットである「ICO」も使用される……というかこれが選ばれることが一番多いようです。理由はIEがこの形式にしか対応していないためとのこと。多くの環境で問題なく表示できるようにさせたいならば、「ICO」ファイルを選んでおくのが無難ですね。
画像サイズはブラウザに表示されるものが16×16ピクセル(ドット)で、私が作ったサイズもこれです。ただ、一般的なicon画像のサイズは32×32ピクセルで、このサイズで作っても構いません。このサイズを使用した場合は、ブラウザが表示するときに勝手にサイズを縮小して表示します。
通常のiconサイズである32×32ピクセルで作ると、デスクトップにブックマークのショートカットを置いたときなどにより自然に表示されるようです。個人サイトへのショートカットが直接デスクトップに貼り付けられるということはあまり多くないかもしれませんが、16×16サイズの場合は拡大してボケるか小さいまま表示するようなので、気になる方は32×32のサイズで作成すればいいでしょう。
iconは複数のファイルを格納することができる
ICO形式のファイルは単純な画像ファイルではないため、複数サイズの画像を内部に納めることができます。さらにこだわったfaviconに仕上げたい場合は、16×16と32×32サイズの両方を格納してみてはいかがでしょうか。すると用途に応じて両方をWindowsが使い分けてくれるようです。下記のリンク先を参考にしてみてください。
favicon用の画像を自分で作る場合は
私の場合は160×160ピクセルの画像を1/10に縮小して使いました。気合いを入れて作った1号目は縮小した時点で細かいディテールが消えてしまい没。現在ものは2号目で16×16でも見えるように、なるべくシンプルを心がけて簡素に作りました。
感想として「16×16は想像以上に狭い」という印象を強く持ったため、皆さんも作るときはその辺りを頭に入れておくといいかもしれません。細かいところにこだわっても、恐らく縮小した時点で消えてしまうでしょうから。
2. icon（ICO）形式に変換
1.の手順で作ったファイル、もしくは手元にある画像をicon形式に変換します。
ただし、この作業はIEで表示できなくても構わないなら必要ありません。Firefox、Operaなどなら画像ファイルのままでもきちんと設定すれば表示します。特に必要な作業だと思われない方は読み飛ばしてください。
Webサービスでfaviconに変換
私は1で作った16×16ピクセルのPNGをiconファイルに変換しました。利用したのは下記のWebサービスです。
上記のサービスは閉鎖したようです。同じようにfaviconを作れるサイトがあるので以下のサイトを参照してください。
使い方は作った画像ファイルをトップページの「favicon.ico 作成」ボタンから変換するだけです。登録作業なども一切不要なので簡単ですし、変換作業自体も数秒で終わるはずです。非常にお手軽なのですが、注意点がふたつほどあります。
ひとつは受け付ける画像フォーマットが「JPG」「GIF」「PNG」のみということ。画像ファイルが「BMP」の場合は、事前にいずれかの形式に変換しておく必要があるでしょう。個人的には変換時に劣化がない「PNG」をお勧めしておきます。
もうひとつは上記のサービスが16×16ピクセルのfaviconにしか対応していないことです。そのため1の手順で32×32ピクセルの画像を用意している場合は、勝手に半分のサイズに縮小されてしまいます。
この点が気になるなら以下のサイトを使うといいでしょう。ページは英語ですが読む場所はほとんどありませんし、直感的にすぐ使うことができます。
追記でリンクした新しいサービスでは縮小も自動でおこなってくれます。
このサービスが優れている点は、32ピクセルの画像を変換すると、1.で触れた16ピクセルと32ピクセルの大小アイコンをひとつの「ICO形式」にまとめてくれることです。お手軽に前述のこだわったfaviconが作れるわけですね。
ただ気になった点として、小さい16ピクセルの方はサービス側で勝手に縮小するため、品質は少し落ちるようです。私の場合は丸いアイコンなのに角張った画像になってしまったりと、向かない画像をもある様子。この辺りはどのような画像を使うかにもよるので、自分に合うと思うサービスを使ってください。
3. faviconをアップロードする
特に説明することはないですね。Blogなら各サービスが提供してるアップローダーから。普通のWebサイト(ホームページ)ならFTPからバイナリモードでアップロードしてください。ただし、画像のURLはすぐ必要になるのでメモをお忘れなく。
4. HTMLのヘッダ部分(テンプレート)にタグを書き込む
ヘッダ部分の<head>から</head>の間に以下のタグを書き込んでください。
<link rel="shortcut icon" href="[画像ファイルのURL]" />本来は下記のタグが正しいらしいのですが、実際の挙動自体に差はありません。ただ「正しいHTML」にこだわる方はこちらを選んでください。
<link rel="shortcut icon" type="[画像のタイプ]" href="[画像ファイルのURL]" />[画像のタイプ]に入る文字列は使用する画像ファイル形式によって以下のように変わります。適切なものを挿入してください。
| ICO形式 | image/vnd.microsoft.icon |
|---|---|
| PNG形式 | image/png |
| JPEG形式 | image/jpg |
| GIF形式 | image/gif |
具体例
<link rel="shortcut icon" type="image/png" href="../image/favicon.png" />5. faviconの完成
無事完成して表示されたでしょうか？
最初に書きましたが、私の環境ではFirefoxとOperaだと即座に表示されたものの、IEだと手間取りました。調べたところ、どうもIEはfaviconという概念を普及させたのにも関わらず、どのバージョンでも安定してfaviconを表示できないようです。
特にIE6はアドレス欄でfaviconが表示されたりされなかったりとかなり不安定なのですが、これは仕様のようです。どのように表示されるかはブラウザ設定やWindowsのバージョンなどにかなり左右されるようですが、基本的に「お気に入り」に表示されていれば問題ありません。
私のPCを含めた環境では、たまたまアドレス欄にも上手く表示できました。
IE6やIE7で上手く表示されない方は下記の手順をすべて試してみてください。
- faviconを表示させたいサイトをお気に入り(ブックマーク)から消す
- キャッシュファイル(インターネット一時ファイル)をすべて削除する
- 履歴をすべて消す
- IEを起動し直す
- サイトにアクセスし直して、お気に入りに再度入れる
- もう一度IEを起動し直して、お気に入りから目的のサイトにアクセス
これでも表示できない場合があるようですが、IEは「確実にfaviconを表示させる方法」というのが存在しないようなので、諦めるしかないのかもしれません。
faviconを設置してみて
FC2ブログは後期のサーバだと馬のfaviconが表示されるのですが、この41サーバを含む前期のサーバでは何も表示されません。faviconがあるだけで何となく力が入っているようなサイトに見えますし、無いよりあった方が見栄えは良くなるような気がしますね。
画像さえ作る、もしくは入手すれば結構楽に設置することができるので、興味がある方は試してみてはいかがでしょうか。
この記事へのコメント
コメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。