無料ですぐできるfaviconの作成と設置のしかた

2008

01/22(Tue)

ブックマークやブラウザのアドレス欄に表示されるアイコン、いわゆるfavicon(Favorite Icon)を作って設置してみました。ソフトを用意するのが面倒だったので、使用する画像以外はすべて無料のWebサービスですませました。IEとFirefox、Operaでちゃんと表示されています。

手順自体は別に何も難しくないのですが、少々手間取ったことがいくつかあったので、情報をまとめてエントリにしておきます。

正しいfaviconの作り方

具体的な手順は以下のとおりです。

画像を用意する
Icon形式に変換(省略可)
faviconをアップロードする
HTMLのヘッダ部分(テンプレート)にタグを書き込む
完成

見てのとおり手順は少ないですし、多分画像が手元にあれば10分ぐらいで完成すると思います。ただそれで終わりではエントリを起こした意味がないので、個別に解説していきましょう。

1. faviconに使う画像を用意する

faviconに使えるフォーマット

使用できる画像フォーマットは一般的に「BMP」「JPG」「GIF」「PNG」です。

ただ後述するIcon形式への変換を行う場合は、使用するサービスやソフトによって使えるフォーマットは異なります。私が使ったサービスは「JPG」「GIF」「PNG」しか変換できませんでした。

画像サイズはブラウザに表示されるものが16×16ピクセル(ドット)で、私が作ったサイズもこれです。ただ、一般的なIconのサイズは32×32ピクセルで、このサイズで作っても構いません。このサイズを使用した場合は、ブラウザが表示するときに勝手にサイズを縮小して表示します。

通常のIconサイズである32×32ピクセルで作ると、デスクトップにブックマークのショートカットを置いたときなどにより自然に表示されるようです。(*1)気になる方は32×32のサイズで作成すればいいでしょう。
([*1]16×16サイズの場合は拡大してボケるか小さいまま表示する模様。)

Iconは複数のファイルを格納することができる

さらにこだわりのfaviconが作りたい方は、Icon自体に16×16と32×32サイズの両方を格納してみてはいかがでしょうか。この場合は、用途に応じて両方をOSが(少なくともWindowsは)使い分けてくれるようです。下記のリンク先を参考にしてみてください。

faviconを作成 - フリーソフトでホームページを作ろう！

ちなみに私は160×160ピクセルの画像を1/10に縮小して使いました。気合いを入れて作った1号目は縮小した時点で細かいディテールが消えてしまい没。現在ものは2号目で16×16でも見えるように、なるべくシンプルを心がけて簡素に作りました。

私の感想としては「16×16は想像以上に狭い」というものだったので、皆さんも作るときはその辺りを頭に入れておくといいかもしれません。

2. Icon形式に変換

1の手順で作ったファイル、もしくは手元にある画像ををIcon形式に変換します。

ただし、この作業はIEで表示できなくても構わないなら必要ありません。Firefox、Operaなどなら画像ファイルのままでもきちんと設定すれば表示します。特に必要な作業だと思われない方は読み飛ばしてください。

Webサービスでfaviconに変換

私は1で作った16×16ピクセルのPNGをIconに変換しました。利用したのは下記のWebサービスです。

Favicon Japan!!

使い方は作った画像ファイルをトップページの「Favicon自動生成」から変換するだけです。登録作業なども一切不要なので簡単な上、変換作業自体も数秒で終わります。

ただ注意点が一つ。上記のサービスを使うと、画像は自動的に16×16ピクセルのfavicon(アイコン)に変換されます。そのため1の手順で32×32ピクセルの画像を用意した方が変換すると、勝手に半分に縮小されてしまいます。そういう場合は英語のサービスですがこちらを使うといいでしょう。

FavIcon from Pics

まあ英語といっても読む場所はほとんどありませんし、見ればすぐにわかると思います。

このサービスが優れている点は、32ピクセルの画像を変換すると1で触れた16ピクセルと32ピクセルの大小アイコンを両方自動で作ってくれる上に、1個のIcon形式にまとめてくれることです。ただ小さい16ピクセルの方はサービス側で勝手に縮小するため、品質は少し落ちるようです。(*2)
([*2]私の場合は丸いアイコンなのに角張って見えてしまう。)

必要に応じたサービスを使ってください。

3. faviconをアップロードする

特に説明することはないですね。Blogなら各サービスが提供してるアップローダーから。普通のWebサイト(ホームページ)ならFTPからバイナリモードでアップロードしてください。

4. HTMLのヘッダ部分(テンプレート)にタグを書き込む

ヘッダ部分の<head>から</head>の間に以下のタグを書き込んでください。

<link rel="shortcut icon" href="favicon.icoの場所(URL)" />

本来は下記のタグが正しいらしいのですが、挙動自体に差はありません。ただ、古いFirefoxなどで不具合がでることがあるとのこと。(*3)
([*3]私自身の環境では何の違いもなし。多分Firefox 2以上なら問題ないのでは。)

<link rel="shortcut icon" type="image/x-icon" href="favicon.icoの場所(URL)" />

5. faviconの完成

無事完成して表示されたはずです。イントロダクションでも書きましたが、私の環境ではFirefoxとOperaだと即座に表示されたものの、IEだと手間取りました。調べたところ、どうもIEは(*4)どのバージョンでも安定してfaviconを表示できないようです。
([*4]faviconという概念を普及させたのにも関わらず。)

特にIE6はアドレス欄でfaviconが表示されたりされなかったりと不安定なのですが、これは仕様のようです。(*5)基本的に「お気に入り」で表示されれば問題ありません。
([*5]ブラウザ設定やWindowsのバージョンなどにかなり左右される模様。)

私のPCを含めた環境では、たまたまアドレス欄にも上手く表示できたようです。 IE6のアドレス欄でのfavicon

IE6やIE7で上手く表示されない方は下記の手順をすべて試してみてください。

faviconを表示させたいサイトをお気に入り(ブックマーク)から消す
キャッシュファイル(インターネット一時ファイル)をすべて削除する
履歴をすべて消す
IEを起動し直す
サイトにアクセスし直して、お気に入りに再度入れる
もう一度IEを起動し直して、お気に入りから目的のサイトにアクセス

これでも表示できない場合があるようですが、IEは「確実にfaviconを表示させる方法」というのが存在しないようなので、諦めるしかないのかもしれません。

faviconを設置してみて

FC2ブログは後期のサーバだと馬のfaviconが表示されるのですが、この41サーバを含む前期のサーバでは何も表示されません。faviconがあるだけで何となく力が入っているようなサイトに見えますし、無いよりあった方が見栄えは良くなるような気がしますね。

画像さえ作る、もしくは入手すれば(変にこだわらない限り)結構楽に設置することができるので、興味がある方は試してみてはいかがでしょうか。

ちなみに私のfaviconは透過PNGを使ってマーク部分以外が透けているのですが、これを作る場合には気をつけるべきことがいくつかあるようです。これについてはまた、近日中に別エントリを起こして書こうと思います。

参考サイト

ソーシャルブックマーク登録数

Total : - user(s)

Comment Form

このエントリへコメントを書く
名前 (ハンドル)
タイトル (任意)
メールアドレス (任意)	公開されません
URI (任意)
本文 (必須)	HTMLタグは使用できません
パスワード (任意)	ID生成に使用します
非公開コメントにする (任意)	チェックを付けた場合は管理者のみ閲覧できますとも表示されません。