WEBデザインスタジオ
12
Apr

faviconの作成方法と作成サービス

[ webデザイン : アイコン ]

favicon-mage.jpg


faviconは、ウェブサイトをブラウザで見ているときでているアドレスバーのURLの左側に表示されている小さいアイコンのことです。

こんな感じ↓
ピクチャ 1.png

最近のサイトはオリジナルのfaviconを採用しているところも少なくなく、こうしたちょっとした事で、ユーザーのブックマークウィンドウから見つけやすくしてもらえる工夫かもしれませんね。

では、faviconの作成方法と設定の方法について。


faviconの仕様は、16px 16px です。

基本的に、GIFで作成したほうがいいようです。pngでも問題なく表示されますが、ieの対応がいまいち微妙な為にgifをおすすめします。

faviconの画像制作環境がなくても、下記のようなサービスを使えば簡単に作る事ができます。

favicon japan

検索にもすぐにひっかかりますので、いうまでもないかと。 日本語のサイトで、作成方法から設置方法まで

http://www.favicon.jp/


favikon

画像をアップロードしてから、ブラウザー上で画像のどの部分を使うかを操作して決めることができる。

http://www.favikon.com/


Favicon from Pics

アニメーションで文字を流すことができまっせ。

http://www.chami.com/html-kit/services/favicon/


faviconの設定方法


設定方法は、.htaccessに記述する方法と、htmlに記述する方法2通りあります。


.htaccessに記述する方法

AddType image/xicon .ico
<Files favicon.ico>
  ErrorDocument 404 /icons/favicon.ico
</Files>


htmlに記述する方法

<link rel="shortcut icon" href="画像までのディレクトリ/favicon.ico">

こんだけ。
内の上に方に書かないと、反映されない場合があるようです。


また、確認の方法ですが、windows ie6 の場合、一度一時ファイルを削除する必要がある場合があるようです。

インターネットオプション > インターネット一時ファイル > ファイルの削除

から一度ファイルを削除した後に、一度ieを終了。再度起動して、お気に入りに追加という事をおこなってください。

IEの仕様のようなのですが、"お気に入りに追加する"と言う操作ではじめてfaviconが表示されるようです。そもそもなぜこのfaviconという機能がついたかというと、Microsoftの独自機能だったようで、お気に入りにどのくらいのユーザーが登録しているのかをログから導きだせるという目的だったからのようです。

お気に入りに追加することで、favicon.icoが呼び出されるという仕組みをログで追うということらしいです。ただ、残念ながら、現在は多くのブラウザで実装されている仕組みなので、何回お気に入りに登録してもらったかは、測れないんですけどね。


>internet Explorer6 のfavicoの表示について


http://q.hatena.ne.jp/1133217127


このアイコンを作成してくれるサービスもあったりして、うまく利用するとサイトバリューが上がるのではないかとおもいます。

Category :

Advertisement -広告-
MoMAstore

コメントする

ログイン情報を記憶

(0)

このブログ記事に対するトラックバックURL:

PAGETOP↑

SOHO WEBデザインスタジオ 写真flickr

Loading...