作る人 （つくるんちゅ）日記

今、見ていただいている「作る人」ブログには、「ファビコン（Favicon）」というシンボル・マークを設定しています。

最近のブラウザーなら、ほとんどが対応していますし、お気に入りに登録すると、印象的な目印になります。

この「ファビコン」。実は意外と簡単に作れます。

サイズは16ピクセル×16ピクセル。とても小さなアイコンです。

↑ 実寸大。


自分のブログに、オリジナルのファビコンを付けている人はまだまだ少ないのですが、僕が使っているTI-DAブログを始め、「テンプレートのカスタマイズ」ができるブログ・サービスを利用している方なら、テンプレートに「タグ」を１行書き加える事で設定可能です。

以下、方法をまとめてみました。

ファビコン画像の製作方法

方法は大きく分けて２種類。

１、写真や適当な画像をファビコン化する方法
　正方形の画像を準備して、以下のサイトにアップロードすると、自動的に縮小・変換されます。

　　DYNAMICDRIVE
　　FavIcon from Pics
　　graphicsguru
　　favicongenerator
　　FAVICON GENERATOR
　　faviconr

２、WEBサイト上で、塗り絵のように画像を製作する方法
　16ピクセル×16ピクセルのマスに、色を塗って画像を作っていきます。

　　favicon.cc
　　256pixels
　　favicon maker v1

折衷案（せっちゅうあん）、他

　　適当な画像をアップロードして、好きな部分を切り抜いて製作します。
　　favikon

　　画像をアップロードして、ドットで編集していきます。（ブラウザーgoogle chromeは未対応）
　　DeGraeve.com

　　ウインドーズ上で動く、フリーソフトも見つけました。
　　@icon変換

　　他サイトで紹介していた方法。
　　GIMPとwiniconプラグインを使う方法

ちなみに僕は、画像編集ソフトを持っているので、１の方法が簡単でした。


さて、WEB上でファビコン製作が完成したら、ダウンロードしてデスクトップなど分かりやすい所に置いておきます。
今回紹介したファビコン製作用サイトは、いずれも「ウインドーズアイコン形式」（拡張子が「.ico」）と呼ばれるタイプを作れます。（ファイル自体に、作ったデザインのアイコンが付きます）

注：一般的なJPGやGIF、PNGというタイプの画像でも、ファビコンとして設置する事は可能です。ただ、Internet Explorerが対応していない点がネック。（他のブラウザーなら表示できます。）
まだまだInternet Explorerのユーザーは多いので、「ウインドーズアイコン形式」のファイルを使った方が安心です。
（IE６は、ホームページがあるサーバーのルートにファビコンを置き、ユーザーがブックマークしないと表示されません）

サーバーにアップロード

次に、作ったファビコンのファイルを、サーバーにアップロードします。

自分のサーバーを持っている人や、拡張子が「.ico」の画像ファイルを登録できるブログサービスの場合は問題ありませんが、そうで無い場合は、どこか無料で画像をアップできる場所を探す必要があります。

少し調べてみたのですが、フリーでico画像を登録可能なサイトは少ないようです。
（http://www.favicon.jp/ ← こちらで会員登録すると、画像登録できるようです。）

そこで、僕の方でもアップロード用のスペースを作ってみました。

「ファビコン倉庫（フリー）」
（解説ページ → フリーの「ファビコン（Favicon）」置き場を作ってみた）


▲ ファビコンをアップロードすると、自動的に「設置用タグ」を発行します。

しばらく使わなければ、自動で削除する仕組みなので、特に会員登録は必要ありません。


良かったら、どうぞ。
（テスト、歓迎です。いろいろ試してみてください）

ブログへの設置方法

TI-DAブログの場合は、管理画面のテンプレートからカスタマイズ。

同じ仕組みを使っている地域ブログも、方法はまったく一緒。
その他、カスタム可能なブログは数多くあります。

管理画面からテンプレートの編集ページを開き、トップページ、個別ページ、アーカイブ。それぞれのページにファビコンを表示するタグ（指示）を書き込みます。（TI-DAブログの場合は、3箇所書き込みが必要です！）

タグの書式は次のような形式。
<link rel="shortcut icon" href="画像をアップロードしたURL" />
（「ファビコン倉庫（フリー）」なら、この「設置用タグ」を自動で出力してくれます）



書き込む場所は、テンプレートのヘッダーと呼ばれる前半部分（上から10行目付近）「<link ～」という文字が並んでいる所に追加します。
「トップページ：／個別記事：／アーカイブ：」それぞれに追加したら作業終了。


これで、自分のブログにファビコンを設置する事ができます。
お試しあれ！




▲顔写真をファビコン化してみた所。小さくてボケボケです（笑）。