第32回：自分専用のfavicon（ファビコン）を付けてみよう

favicon（ファビコン）とは、

FAVorite ICONの略で、 ウェブブラウザのお気に入りリストやタブに現れることのある、ウェブサイト独自のアイコン。
（はてなキーワード 「favicon」より）

のことです。
例えばココログのログイン画面をブラウザで開くとアドレスバーのURLの前に「ココログ」の文字が表示されます。

これが「favicon」です。

今回はこれを自分のブログに設定する方法です。

事前準備1：favicon用の画像を準備する

「ペイント」などの描画ソフトで正方形の画像を作成し、自分のPC内の判りやすい場所に保存する。
※ favicon自体は16px×16pxの大きさですが今回は後でアイコンファイルに変換するツールを通し自動的にこの大きさに縮小するため、 元画像の大きさはもっと大きくても大丈夫です。
※但し、実際に使う大きさはあくまで16px×16pxですから、その大きさに縮小されることを考えて画像を作成しましょう。
※作成した画像は「jpg」「gif」「png」のいずれかの拡張子で保存して下さい。

事前準備2：画像をfaviconに変換する

「Favicon Japan」さん提供の 「Favicon自動生成」を利用して、画像をfaviconに変換します。

1. 「Favicon Japan」 さんにアクセスし、トップページの「Favicon自動生成」欄にある「参照」ボタンを押す。
2. 「ファイルの選択」ウィンドウが開くので、上記で保存した画像を選択し「開く」ボタンを押す。
3. 元のページに戻るので「faviconを作成する」ボタンを押す。
4. 「preview」部分に出来上がりのイメージが表示されるので、それでよければ「DownLoad」ボタンを押す。
5. 「ファイルのダウンロード」ウィンドウが表示されるので「保存」を選択し、自分のPC内の判りやすい場所に保存する。
   ※この場合、「ファイルの種類」は「全てのファイル」 にして下さい。

【'07/02/24追記】
※「Favicon Japan」さんのツールは時々変換に失敗することがあるようです。
※同様の処理をしてくれるサイトを2つご紹介します。（いずれも海外のサイトで説明は英文ですが、操作は簡単です）
■DeGraeve.com内の 「favicon editor」→注意：変換できるのはpng形式のみ/元画像を16×16pxで作成/ダウンロードファイルは「zip」形式（解凍ソフトが必要）
■HTML-kit Tools内 「Favicon from pics」→注意：ダウンロードファイルは「zip」形式（解凍ソフトが必要）

以上でfavicon用ファイルの完成です。

ココログにfaviconファイルをアップロードする

上記で作成したファイルをココログのサーバーにアップロードします。
アップロードの方法は別ページ、
■ 『基本1： ファイルのアップロード』
を参照して下さい。
＜'06/06/06追記＞
※アップロードの場所について
「ホーム（ルートディレクトリ）」を指定しないとIE6には表示されない
との情報を「風柳亭」 の風柳さんから頂きました。（風柳さん、ありがとうございました）
※IEをお使いの方は参考にして下さい。
※詳細は風柳さんのコメントを参照して下さい。

faviconを表示するための設定をする

1. 上記の『基本1： ファイルのアップロード』の5.で表示された画像の名前をクリックしてページを開く。
   ※上記でアップロードした画像が表示されているはずです。
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※この時urlの最後（つまりファイルの拡張子）が「http://～.ico」になっていることを確認して下さい。 これ以外の拡張子ではfaviconとして使えません。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてもOKです。
3. 「管理ページトップ」→「ブログ」タブ→（便利メニューから）「設定の変更」を開く。
4. 「ブログのサブタイトル（キャッチフレーズ）」 欄に下記のタグを入力する。
   
   <link rel="shortcut icon" href="○○○">
   
   ※○○○=faviconファイルの保存先url（上記2.でコピーしたもの）に置き換えて下さい。
5. 画面下方にある「変更を保存」ボタンを押す。
6. ページに「サイトに反映」ボタンが表示されるので、これをクリックする。
7. 反映する範囲を指定して「反映」ボタンを押す。
8. 「反映しました」画面が表示されたら終了。

以上です。
上手くできましたか？
自分のブログを表示してみてアドレスバーに作成した画像が表示されていればOKです。
※ブラウザに反映するまでにしばらく時間が掛かる場合もあるようです。

私は単純にココログカラーのオレンジを背景色にして、「初めて」の「は」の字を入れてみました（笑）

おまけ：faviconを削除、変更する場合

一度設定したfaviconを削除または変更する場合、通常はタグを削除するか、上記の手順を繰り返して新しい参照先を指定し反映させれば大丈夫なはずですが、場合によっては以前のfaviconが消えないときがあるようです。
その場合ブラウザの「ファイルの削除」を実行すれば削除、変更が有効になるはずです。
但し、ブラウザによってはfavicon用の保存フォルダーを別に持っていて、そこのファイルを削除しないと変更が有効にならないものもあります。（例：Sleipnirなど）
その場合は、PC内のファイル検索で「favicon」ファイルを探してその中の該当のデータを削除してから、修正をかければ反映するはずです。

• faviconはブラウザの種類によって、 表示されるものとされないものがあるようです。
  「Favicon Japan」 さんにブラウザごとの対応表がありますので、詳しくはそちらを参照して下さい。
  ■ブラウザ別ファヴィコン対応表
• （個人的なPC環境のせいだと思いますが）私の場合「Favicon Japan」 さんのツールでは上手くいかなかったので下記のサービスを利用しました。
  ■「degrave.com」内「Favicon Editor」
  これは表示されている16×16マスの方眼の中に一つずつドットを打って画像を作成していくツールです。
  作成後、「make favicon」ボタンを押すと下に原寸の画像が表示されますので、その画像を「右クリック」→ 「名前を付けて画像を保存」で自分のPC内に保存します。
  ※「make favicon」を押した後でも、何度でも修正可能です。出来上がりの様子を見ながら修正を繰り返して作成できます。
  あとは、上記の【faviconを表示するための設定をする】と同じ処理でOKです。
• favicon用の素材を配布されている素材屋さんもあるようなので、「自分で画像を作るのは難しい」 という場合はそちらを利用するのも一つの方法です。
  ※「favicon素材」などをキーワードに検索すると出てきます。
  その場合、画像は変換しなくてもfaviconとして使えるファイルに（多分）なっているはずですので、上記の設置方法の 【faviconファイルをダウンロードする】から始めて下さい。
  ※素材サイトから素材をお借りする場合は、必ず利用規約を読んでその範囲内で利用しましょう。

■「FaviconJapan」さん
■「degrave.com」
■素材サイト 「PRISM」様＜記事内のボタン素材＞

---

*この記事にコメントを書く*

---