Bloggerユーザ向けファビコン設置法(お試し版)

お試しと言っても使用期限がある訳ではありません。ただ、対応するブラウザがちょっと少ないだけです。そも「ファビコン」自体がMicrosoftの勝手規格なので、表示できなくても何ら不思議ではない訳です。

通常、ブログにファビコンを設置しようとすると、外部サーバかオンラインストレージのようなものが必要になります。これでは、ちと面倒なのでBloggerユーザにはおなじみのPicasaを使ってみます。

けれども、Picasaにファビコン用ファイル「favicon.ico」をアップロードしようとしても、サポート外のファイル形式であるため拒否されてしまいます。

そこで、一般的の画像形式であるPNGを使用します。この「PNG形式のファビコン」を理解してくれるWebブラウザがあまり多くはないのです。それでも、外部サーバを用意するよりはお手軽なので、お試し版としてご紹介する次第であります。

まずは、元となる画像を16×16ピクセルのサイズに収まるよう描きます。背景の透過も可能。冒頭の画像はサンプル的に書いたものですが、四隅に透過を設定しています。画像ができたらPNG形式で保存します。ファイル名は「favicon.png」でも何でも構いません。そしてPicasaにアップロードします。

アップロードした画像をクリックしたウィンドウ内の右中程に「この写真へのリンク」があります。これをクリックして「画像を埋め込み」の方のコードをコピーし、テキストエディタなどにペーストしておきます。

そして、コピーしたコードの「img src」から画像のURLを抜き出します。ただ、コード内では「https:」になっているため「http:」に書き直しておきます。

抜き出したURLの真偽を確かめたい場合には、新しいウィンドウなりタブなりにそのURLを入力して開いてみれば分かります。小さな画像がひとつだけ表示されればOK。抜き出した画像のURLはこんな感じとなります。

http://lh3.googleusercontent.com/-iK4ko2qpOuQ/TeqOcvYCAyI/AAAAAAAAApk/QcZ6YITAmO0/s800/pooka.png

※なお、ファイルは削除済みのため上記URLは機能しません。

このまま、ファビコンを表示するためのコードも書いてしまいましょう。以下のコードに抜き出した画像のURLを転記します。

<link href='ここにPicasaに置いたPNGファイルのURLを記述' rel='shortcut icon'/>
<link href='ここにPicasaに置いたPNGファイルのURLを記述' rel='icon'/>

続いて、Bloggerのダッシュボードの「デザイン」から「HTMLの編集」を選択します。念のためテンプレートをバックアップしておくのがよろしいでしょう。

ブラウザの検索機能を使って「</head>」の文字列を探します。見つかったら、その直前に上記コードを入れ込みます。後はテンプレートを保存するだけ。実際に表示させてみましょう。

少なくともFirefoxでは表示が可能です。サンプルを表示させてみたのがこちら画面。ちゃんとファビコンとして機能しております。

もちろん、このまま使用を続けても問題はありません。もう少し対応ブラウザを増やしたいという方は、外部サーバなりオンラインストレージなりを用意しましょう。今回の方法は、その時のための練習にもなります。

すでにファビコン用のコードは設置してあるので、「ここにPicasaに置いたPNGファイルのURLを記述」の部分を、用意した「favicon.ico」のURLに書き直してあげるだけでOKです。

Googleのアカウントを持っていれば、Picasaもすぐに使えるようになるので、興味のある方はお試しください。Blogger以外のブログでもファビコンの設置が可能なら応用できると思われます。

***Edit***
Blogger純正のファビコン編集機能が登場しました。詳しくはこちらから。

ー記事をシェアするー

B!