Virtual World SL-Diary (@ Tvd): BloggerでFavicon設定

2010年3月1日月曜日

BloggerでFavicon設定

私の使っているブログはGoogleのBloggerを使っているのですが、標準ですとURLを入れる欄の所へ「」←このようなアイコンが表示されますよね！

URL_Left

このアイコンを独自のアイコンへ変更しようと思ったわけですが、このアイコンの変更をするのに「Favicon」って言うものを指定するみたいです。

まずは、「Favicon」をＷｉｋｉで検索してみました。

Favicon＝Favicon（ファビコン）はウェブサイトやウェブページに関連付けられたアイコンのことである。

↑ と言う事みたいです。

そこで、普通のWebページなら、16x16ドットのアイコンファイルを作って「index.html」ファイルが置いてある場所と同じフォルダーへ「favicon.ico」って言うファイル名を付けて置いておけばいいようですが、私の知る限りでは、Bloggerは、そのような場所へファイルをアップロード出来ないです。ｏｒｚ

いろいろ考えた結果、このBloggerへ目立たない所へJPEGファイルを置いて、それをBloggerのテンプレートを修正して強引に読み込んでやらば出来るかなーと思って実験してみました。
（「」←ここへ貼ったのを使ってみます。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNByCwJDjlBfcQ5NNij57f3D86KKsoE2MKJN_749xa7KbIWmxK8Ie7d4I_lFw6qTOgOHIvbjCGGlDAVXNgMcOPVGSUjFWHJTslIeKYmqntJiT4Oamh3brT81Flbj0gKn2aMIhA0lPHa6k/ ）

①Bloggerへログインして「カスタマイズ」⇒「レイアウト」⇒「HTMLの編集」を選びます。
（念のため、バックアップを取ってから行ってね！）

②HTML文の<head>・・・</head>の間へ次のように入れます。

↑ このような行を追記してやればOKです。

↑ 実際にBloggerへ一旦投稿した後にURLを調べて貼ってみたのが、こんな感じです。
↓

↑ 普通のアイコンファイル（.ico）が設置可能なら、↑ こんな感じです。
（「 type='image/jpeg'」←が必要ないです。）

③修正が完了したら、プレビューで表示して確かめてみます。

④プレビューでうまく成功しましたら、保存して完了です。

================================================

Blogger_favicon
※現在、↑ ここのBloggerのURLの横のアイコンは、こんなアイコンになっています。

※今、知ったのですが、ＩＥ７では、．ｉｃｏファイル以外のファイルは開けないようなのです。

次のようにすると、いいようです。（ＦｉｒｅＦｏｘなどは、アニメーションＧＩＦでも対応）

因みに、アイコンファイルの作成には、フリーソフトの「アイコンウィザード」を使用しています。
JPEGなどの画像ファイルをいろんなサイズのアイコンファイルへ変換してくれます。
Faviconファイル用には、16x16ピクセルと32x32ピクセルのサイズで２５６色に原色して作成すればいいみたいです。

※Googleアカウントが無い方は、コメントを入れる時に「名前/URL」を選んで下さいね＾＾

2 件のコメント:

La さんのコメント...: これがFaviconっていうのか。。。ずっと気にはなってたけどやり方知りませんでしたｗ

今は特段必要ないけど、必要な時はまたここ開くかも...φ(・ω・*(・ω・*)φメモメモ♪

コメント投稿ページはTvdさんのFaviconになってないですよｗｗｗ
ここは別管理なのかな？; 2010年3月2日 19:33:00 JST
Licca さんのコメント...: ＞Laさん、
あまり大きな問題じゃないけど、
前から気にはなっていたよねー＾＾

しかし、このコメント投稿ページは
どうすれば、いいのでしょうね！
テンプレートとか、カスタマイズ出来るように、なってたかなー＾＾; 2010年3月2日 21:40:00 JST