一昨日、Firefoxを2 から3 にバージョンアップしたところ
アドレスバー内のFavicon が以前よりシンボリックな扱いをされていたので
トップページも変更したついでにちょっと替えてみました。

Firefox 3 でのFavicon の扱い
アドレスバー内のFavicon

Faviconというのはブラウザのアドレスバー内に表示されたり、ブックマークしたサイトのサイト名脇に表示される16ピクセル×16ピクセルの小さなアイコンです。ちなみにブラウザがIE6(インターネットエクスプローラ6)だとうまく表示されないときがあります

実に小さな画像で細かい描写が再現できない分、どう主張させるかがWEBデザイナーの腕の見せどころなのでしょうね。私はただ写真を切り取っただけ(笑)

Official Google Blog: One Fish, Two Fish, Red Fish, Blue Fish:

今月はじめ、あのGoogleがFaviconを替えたのは記憶にあたらしいところではないでしょうか。
Official Google Blog: One Fish, Two Fish, Red Fish, Blue Fish:
上記ページには300種類以上のFaviconを作成したことが書かれていて16×16 の小さな画像もそれなりに重要な役割を果たしていることがわかります。


自分のWEBサイトでこのFaviconを表示させるには
HTML のhead 内にFavicon が置かれているアドレスを記述するだけです。
たとえばこのサイトですと

<link rel="shortcut icon" href="http://www.photoclip.net/hotels/favicon.ico" />

このように記述します。

livedoorブログで自分のFaviconを表示する

同じドメイン名じゃないとまずいかというとそういうことでもなくて、たとえばlivedoorブログなどではhead 部分をいろいろ編集できるのでご覧のように自分の好きなFaviconを表示させることが可能です。
私の回りでも利用されている方が多いexblog はhead が編集出来ないので残念ながらFaviconの変更はできません。

ちなみにlivedoorブログはjavascript なども使えるのでちょっと知識があればLightbox やHighslide といったこのサイトで使っているような画像表示スクリプトを使うことも可能です。

livedoorブログでのSample ページ

Favicon を作成する場合はネット検索するとフリーウェアのFavicon 作成ソフトというものがいくつかヒットしますのでそれを利用するのがいいでしょう。ソフトをインストールするのはイヤだという方は、ブラウザ上で作れる以下のようなサイト(ジェネレーター)もあります。

16×16のFavicon、サイズが小さいので実際自分で作ってみると簡単そうでムズカシイ。

では、すてきな週末を  


↑ このページの先頭へ戻る

関連しているかもしれない投稿

Posted on June 20, 2008  and last modified on June 22, 2008.


Trackback URL

Leave a Reply

:zou: :wa-i: :up: :thumb-up: :sake: :run: :reply: :quotation: :poripori: :peace: :pa-n: :nikoniko: :namida: :mu-n: :hoxtu: :hare: :hakushu: :ga-n: :frog: :eat: :down: :cat: :camera: :beer: :ase: :angry: :aisatsu: ::-D: ::(: :8O: