動くfavicon(お気に入りのアイコン)を設置する方法

| カテゴリ/ カスタマイズ・小技


お気に入り(ブックマーク)した時に、左に出るアレの設置方法です。

fffvicon.gif



動くfavicon(お気に入りのアイコン)を設置する方法

まず、faviconを作りましょう。
以下のサイトでは、アップした画像をfaviconに変換してくれる便利なサイトです。

FavIcon from Pics
http://www.html-kit.com/favicon/

「Animate Favicon」というボタンにチェックを入れると
アイコンの後にアルファベットを連続することができます。

普通にイメージだけで連続させたい人は、faviconのオーソドックスなサイズ(16px×16px)で
普通にアニメーションGIFを作ります。
作ったアニメーションGIFは、以下のサイトで自動的にfaviconに変換できます。

http://www.favicon.jp/
http://www.favicon.jp/

faviconが出来上がったら、表示したいページに
ソースを追加してやりましょう。

<link rel="shortcut icon" href="favicon.icoまでのパス">
<link rel="icon" href="アニメーションgifへのパス" type="image/gif" />


アニメfaviconを設置する場合は、
favicon.icoとfavicon.gf(アニメーションgif)の2種類を用意しましょう。


動くとかなり自己満足が得られるはずですw

※IEはでないこともあるそうです。firefoxでは見れましたが。。。

タグ: