Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Favicon.icoは効果絶大!??

[スポンサード リンク]


Googleのfaviconが大文字の「G」から小文字の「g」に変わりましたね。
慣れかもしれませんが、わたしは前のアイコンの方が好きでした。
まぁ、大した事じゃないですけどね

favicon(ファビコン)とはWebサイトなどに関連付けられたアイコン(小さな画像)のことです。ブラウザのお気に入り(ブックマーク)やアドレスの表示欄、タブブラウザではタブのページタイトルの左側などに表示されているアイコンです。

この記事を読んでくれている方ならすでに表示されていると思います。
下の画像がアドレス表示欄についているでしょう!?

favicon.gif ← 当ブログのFaviconです(単純にブログ名の頭文字)

faviconは基本的に自己満足の世界だと思います。
でも、お気に入り(ブックマーク)の登録数が多い場合、お目当てのWebサイトにFaviconが付いてると結構探しやすかったりします。
そういった意味も含めて、当ブログでは目立つ奇抜な色にしてみました
「H」ですけど、エッチなサイトではありませんよ

favicon.icoの作り方

faviconは単なる画像ではありません。拡張子はicoですので、gifやjpegの画像はicoに変換しなくてはいけません。ico形式は、中に複数の色数と解像度を保存できます。
つまり、16x16、32x32(px)などサイズの違う画像をマルチアイコンとして保存できるわけですが、ブラウザ表示だけならば16x16(px)で十分です。

またfaviconの名前は任意で結構です。○○○.ico。

画像の変換にはfavicon.icoを作ろうというサイトが便利です。
マルチアイコンも簡単に作れます。(元画像は各自持参)

faviconへの変換方法は説明を読めばわかると思います。
元画像ファイルを指定して、favicon.ico作成ボタンを押し、出来上がったfaviconをダウンロードするだけです。

favicon.icoの設置方法

favicon.icoを作っただけでは、表示されるはずありませんよね。
ファイルをアップロードした後、ブログに関連付けます。

  1. 作成したfavicon.icoをファイルをアップロードします。
    FC2ブログの方は、ファイルをアップロードした後に赤太字で表示される画像のアドレスをコピーしておくと便利です。
    http://blog-imgs-○○.fc2.com/○/○/○/~/○○○.ico
  2. ブログの<head>~</head>の中にlink属性タグを入力します。
    link属性タグは単独でも良いみたいですが、両方指定する事が望ましいようなので両方指定しておきましょう! また、なぜtypeが付いているかについては、wikipedia:Faviconの標準化問題の項目を見ればわかると思います。
<link rel="shortcut icon" href="アップロードした○○○.icoのアドレス" type="image/vnd.microsoft.icon" />
<link rel="icon" href="アップロードした○○○.icoのアドレス" type="image/vnd.microsoft.icon" />

以上でfaviconの設置完了ですので確認してみましょう。

faviconの元画像の作成は、色々と試行錯誤してがんばってください。
16x16 (px)の世界では、細かい画像は表現不可です。
初めての方は、標準装備のペイントソフトなどで単純なアイコンを作ってみましょう!

ペイントの場合、「変形」-「キャンパスの色とサイズ」で単位をピクセルにして、幅と高さを16に設定しましょう。虫眼鏡でキャンパスを拡大すると書きやすいですよ

私は記事が書きたい気持ちを抑えられずに思いつきで作ってしまいました。
しかし、faviconはブログの目印になるわけですからじっくり作りこむ方がより良いでしょう!
印象度アップするカモ リピート率アップするカモ ブックマークしちゃうカモー

それでは、みなさんfavicon作り頑張ってちょーだい

FC2 Blog Ranking

(追記)
IEではアニメーションGIFをfaviconに使えませんが、Firefoxならば動くファビコンを利用できます。
まずはアニメーションGIFを用意して下さい。

<head>~</head>内にはこのように書きます。

<link rel="shortcut icon" href="アップロードした○○○.icoのアドレス" type="image/vnd.microsoft.icon" />
<link rel="icon" href="アップロードした○○○.gifのアドレス" type="image/gif" />

上のタグはIEにファビコンを表示する為の物です。
その他のブラウザではtype="image/gif"としてあるので、GIF画像が使えます。
また、type="image/png"ならPNG画像が使えます。

重複して記述してもFirefoxはgifの方を読んでくれると思いますので大丈夫でしょう。
あとFirefoxでファビコンが表示されない時はtype="image/vnd.microsoft.icon"をはずしてみてください。
というわけで、色々と試してみてくださいねー。

Comments

omoro : No title

この記事をみてファビコン設定しました
わかりやすかったです
できれば相互リンクさせていただきたいんですけどもしよろしければコメントにてお知らせください。わたしからリンク張ります。
おもしろ便利サイトandフリーソフト【omoroblog】
http://omoroblog.seesaa.net/

omoro : No title

リンク完了いたしました!
たしかにURL間違ってました><:
これからよろしく!
ポチッときました!

Comment Form