滋賀咲くブログで やってみよう♪

--- 2009.8.21 追記 ---

IE では、サイト（ドメイン）のルートにある favicon.ico しか読み込まない仕様になっている場合があるようですので、この方法ではファビコンが付かないことが多いようです。

--- 追記 ここまで ---

変更前

=>

変更後のイメージ

「ファビコン」とは…。
FAVorite ICONの略で、ウェブブラウザのブックマーク(お気に入り)リストやウィンドウアイコン・タブなどに現れることのある、ウェブサイト独自のアイコン（「はてなダイヤリー」内 http://d.hatena.ne.jp/keyword/favicon より引用）です。

滋賀咲くBlog では、「」このファビコンが表示されていますが。
これを、自分で作ったファビコンに変えてみようと思いました。

滋賀咲くBlog での最大の問題点

ファビコンの設置には、ファビコンの画像をサーバにアップロードする必要があります。
ファビコンの拡張子は ico なのですが。
滋賀咲くBlog でアップロードできるファイルは、拡張子が

　gif png jpg jpeg avi mov wmv mpg mpeg mp4 amc 3gp 3g2

のものだけなのです。

ですから、滋賀咲くBlog でファビコンを設置するためには、ファビコンをアップロードできるサーバを使える必要が出てきます。
例えば、プロバイダが提供しているホームページ設置のためのサーバを使うのも一案かと思います。
わたしは、別のホームページやブログなどの開設のために有料でお借りしているレンタルサーバを利用して、設置しました。

準備するもの

準備するものは、16x16 px のファビコン用の画像です。
自分で作るのはどうも… という方は、ファビコン用のフリー素材を提供くださっているサイトがありますので、気に入ったデザインのものを使われると如何かなと思います。

わたしは、「」この画像を作ってみました。
イメージとしては、琵琶湖に虹がかかっていて、右下にお京の「京」を表示… なんですけれど。
なかなか、上手くできないですね。　(笑)

ファビコン用の画像の拡張子が ico になっていない場合は、ico に変換する必要があります。
ico ファイルに画像を変換してくれるサイトは、検索すれば簡単に見つけられるのですが。
gif、jpg、png ファイルを ico ファイルに変換してくれるサイト「FAVICON JAPAN FavIcon from Pics」をご紹介させて戴きます。

+ FAVICON JAPAN +
http://www.favicon.jp/

--- 2009.8.21 追記 ---

FAVICON JAPAN では、ico ファイルにはなるんですが、Windows icon 形式のファイルではなく、IE から見ると png に見えてしまうようです。
こちら　↓　のサイトですと、Windows icon 形式の ico ファイルができるようです。

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

--- 追記 ここまで ---

設置の手順

設置の手順は、

　1.　ファビコン画像のサーバへのアップロード
　2.　テンプレートの変更
　　　・トップページ
　　　・個別記事
　　　・アーカイブ

です。

1.　ファビコン画像のサーバへのアップロード

アップロードされるサーバのマニュアルに従って、アップロードしてください。
そして、アップロードしたファビコン画像の URL を控えておいてください。
メモ帳などのテキストエディタを起動されて、ブラウザにファビコン画像を表示させてコピー & ペーストしておかれると、便利かと思います。

2.　テンプレートの変更

テンプレートの変更は、

　1)　滋賀咲くBlog にログイン
　2)　左メニューの「テンプレート」をクリック
　3)　「カスタマイズ」をクリック
　4)　「トップページ」「個別記事」「アーカイブ」を書替える
　5)　「登録」をクリック

です。

トップページ

個別記事

アーカイブ

変更前 内容 </head> 変更後 それぞれの </head> タグの直前に、次の 3 行を挿入してください。 内容 <!--ファビコン--> <link rel="shortcut icon" href="ファビコン画像の URL"> <!--ファビコンEND--> </head> 青い太い文字のファビコン画像の URLの部分を、アップロードしたファビコン画像の URL に書替えてください。 <link rel="shortcut icon" href="ファビコン画像の URL"> ピンクの太い文字の部分は、消したり書き替えたりしないようにしてください。 わたしの場合は、次のようになりました。 <!--ファビコン--> <link rel="shortcut icon" href="http://okyoo.net/shiga-saku/favicon.ico"> <!--ファビコンEND-->

--- 2009.8.21 追記 ---

バージョンなどに影響されることなく、ファビコンをサポートしている IE でファビコンを表示させるには、

　・　サイト（ブログ）のルートディレクトリにファビコン画像を置く
　・　ファビコン画像は、Windows icon 形式にする

の 2 点を満たす必要があるようです。

Windows icon 形式のファビコン画像を作れるサイトとソフトを、紹介しておきます。

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

+ @icon変換 +
http://www.towofu.net/soft/aicon.php

それでも表示されない場合は、キャッシュと履歴をクリアし、起動している IE を全て終了させてから IE を起動させるといいそうです。