巷ではWeb2.0だとか3.0だとか言ってますが、正直ユーザにとってはWeb5.0だろうが6.0だろうがやりたい事が出来ればいい訳です。ってことで今回はFavIconを作って自分のサイトを地味に飾ってみることにしました。
FavIconっていうのはFavorite iconの略で、日本語にすれば”お気に入りアイコン”みたいな感じですかね。”お気に入り”に誰かが追加してくれた時に自分のサイト名の横にアイコンを添付できるようになります。
Blogなんかを設置してHP開設!ってやると、だいたいはFavIconを参照する機能が付いていますので設置するだけでFavIconが使えるようになります。
FavIconの規格も一応あるみたいで、Windowsで言う”アイコン形式(.ico)のサイズは16*16、32*32が一般的みたいです。
「画像はペイントで気合で作るとして、アイコン形式なんてどうやって変換すればいいんだよ。」って人のために変換サービスを無料でやってくれるところもたくさんあります。その中で今回僕が使ったところをご紹介。
サイト中の”Source Image”というところに自分で作った画像ファイルを読み込ませて”Generate FavIcon.ico”というところをクリックするだけで自分で作った画像ファイルをFavIcon形式に変換してくれます。
対応している画像形式はgif、jpg、png、ico、bmpのようです。
Previewもできるので調整しながら何度でもチャレンジ出来ますね。
また、「英語は苦手だよ、日本に住んでるんだから日本語だろ、日本語。」という方のために日本のFavIcon変換サービスもご紹介します。
画像の種類はgif、jpg、pngに対応しているようです。
また、こだわりを持ってアイコンを作っていきます。って人のために本格的なドット絵作成アプリケーションも公開されていますのでご紹介。
EDGE(エッジ)オフィシャルサイト
無事FavIconが作成できたらサーバにアップロードしましょう。
自分のサイトのルートディレクトリに置けば勝手に認識してくれます。僕のサイトだと
ここに設置しました。
自動で認識されない場合はhtmlファイルを自分で編集します。
この場合詳しい説明がこちらにありましたので参照してみてください。
僕が作ったアイコンはこんな感じです。
これで”お気に入り”にこのページを追加するとアイコンがサイト情報と一緒に表示されるようになります。