本ブログに favicon を付けた。元々、favicon 用の画像は 2006-05-31 に作っていたのだけど、Blogger テンプレートを編集するのを忘れてた。
以下、設置作業のメモ。
参考にしたサイトは、以下の通り。
- Blogger Beta Tips: ブログのアイコンを変える
- クリボウの Blogger Tips: Favicon を設定する
- クリボウの Blogger Tips: アニメ GIF を自分のサイトの Favicon に
favicon の作成
前エントリーで作ったのは、(favicon の元になる) PNG 画像だった。以下のサイトで、PNG 画像を favicon 形式に変換した。
「Source Image」に PC 内の PNG 画定のパスを入れて、「Generate Favicon.ico」ボタンをクリック。プレビューが表示されるので、OK なら「Download Favicon」ボタンを押す。
ダウンロードしたファイルは、「favicon_20061104_4510.zip」というような名前の Zip ファイルになってる。これを解凍して、中の favicon.ico を取り出す。
元ファイルの名前が at-ballade-bold.png だったので、あわせて at-ballade-bold.ico に名前を変更。
favicon ファイルのアップロード
本来なら、index.html と同じ場所に favicon を置く。けど、Blogger はファイルのアップロードが出来ない。
そこで、Google Pages を使った。Google Pages の管理画面から at-ballade-bold.ico をアップロード。favicon ファイルの URL は次のやうになった。
- http://masayuki.ataka.googlepages.com/at-ballade-bold.ico
(2007-01-30 追記) Google Pages へは favicon.ico というファイル名ではアップロードできない。というのも、Google Pages の favicon.ico とパスと衝突してしまうから。ここの例のやうに favicon.ico とは違う名前に変更してから、ファイルをアップされたし [Thanks: Blitz Koji]
テンプレートの編集
テンプレートの HTML 編集画面に入る。title 要素の下に、次の二行を追加。
<link href='http://masayuki.ataka.googlepages.com/at-ballade-bold.ico' rel='shortcut icon'/> <link href='http://masayuki.ataka.googlepages.com/at-ballade-bold.ico' rel='icon'/>
これで保存してお終い。favicon ファイルの URL は、各々の環境に合わせて変えられたい。
Blogger初心者です。
ReplyDeleteこちらを参考にfavicon自作できました。
他にも、いろいろと役立つことが沢山書かれているので、勝手ながら今後も参考にさせていただきます。
Blitz Koji さん、初めまして。この記事がお役に立たようで、私も嬉しいです。
ReplyDeleteそれから、favicon.ico と Google Pages 衝突問題について、本記事に追記致しました。ご指摘、ありがとうございます。
話題が一つに絞り切れていない雑記ブログですが、どうぞよろしく。
どもでーす。
ReplyDelete「最近のコメント」で見かけたので、こちらを再読しました。
私も Favicon が気になっていたので、勢いで作ってしまいました。
（移行してから、Blogger のロゴが表示されなくなったので…)
FavIcon from Pics で作った .ico ファイル、解凍時にエラーが出て、PC(W2000) 上では開けなかったのですが、GooglePages にアップロードして、ブログにコードを埋め込んでみたら、うまい事表示できました（.ico ファイルは、通常の画像表示ソフトでは開けないのかな？)。
いつも有難うございまーす。
こんにちはー。やっぱり、「最近のコメント」はあるといいですね ;)
ReplyDeleteFavicon 見ました。二種類作ってるんですね。私は life@aka の方の favicon を作ってないので、いつか作らなきゃと思ってはいるのですが、う〜ん ^^;
> .ico ファイルは、通常の画像表示ソフトでは開けないのかな？
アイコン・ファイルは、GIF や PNG に比べるとマイナーな画像形式ですから、もしかしたらちゃめさんの画像表示ソフトでは対応していなかったのかもしれません。今、ちょっと調べてみた所、Picasa はアイコン・ファイルをサポートしていませんでした。
こんにちはー！
ReplyDelete「favicon」以前から作ってみたかったのですが、私の知識では無理とあきらめておりました。
@akaさんのおかげで、私にもつける事ができました。
私のブログにメモとしてリンク貼らせていただきました。
それと私の「知りたいっ！」ことへの情報提供ありがとうございました。
今後とも宜しくお願いします。
higetiger さん、こんにちは。この記事がお役に立ったようで、何よりです。それから、リンクもありがとうございます :)
ReplyDelete> 今後とも宜しくお願いします。
こちらこそ、どうぞよろしく。
PS.
higetiger's memo も購読してみました ;)
はじめまして。
ReplyDeleteBloggerにfaviconつけたくて、こちらのページにたどり着きました。
おかげさまで無事つけることが出来ました。
ありがとうございます。
naho さん、初めまして。お役に立てて、嬉しいです。ファビコンをつけると、自分のブログにさらに愛着が湧きますよね。
ReplyDelete@akaさん
ReplyDelete初めまして。
@akaさんの記事を参考に無事Faviconの設定が完了しました。
有難う御座いました。
oasis さん、初めまして。コメント、ありがとうございます。記事が役に立ったようで、私もうれしいです。
ReplyDeleteはじめまして。
ReplyDelete今更ながらファビコン設置してみました。こちらのサイトを参考にさせて頂きました。ボクはhtmlなど全く分からない人間なので、またブログをいじりたくなった時にはこちらにおじゃまします。
どうもありがとうございました。
タケPさん、はじめまして。
ReplyDelete記事が役に立ったようで、私も嬉しいです。また、気軽にお立ち寄り下さい :)
PS. 私も Moleskine 使ってます。いいノートですよね ;)
初めまして。
ReplyDeleteキャッシュを空にする等、何度試してもうまくいきません。どうしてもfaviconを表示させたいのですが、お忙しいいところ申し訳ありませんが、ソースを見て頂きたいのですが…。http://hi-lite-desire.blogspot.com/
noni さん、初めまして。
ReplyDeleteソース、拝見致しました。
短めのソースを示します。
<link href='(略)/favicon.ico"' rel (後略)
favicon.ico の後ろに、不要な " が見られます。これを削ると favicon が表示されるはずです。
ではでは。
本当にありがとうございました。
ReplyDeleteというか、すみません。
なんか、入力ミスにも程がありますね。。
無事、favicon が表示されてよかったです。
ReplyDeleteこの程度のことなら、お気軽にご質問下さいませ。
# 一人で悩んでると、気づきにくいことですから ;)
はじめまして。
ReplyDeleteブロガーのBマークも気に入っていたのですが、＠akaさんがコメントにレスされている「ファビコンをつけると、自分のブログにさらに愛着が湧きますよね。」というのにつられて（？）早速やってみました！確かに愛着がわきますね！！どうもありがとうございました＾＾
ilha さん、はじめまして。
ReplyDeleteコメントありがとうございます。
喜んでもらえて、@aka も嬉しいです。
はじめまして、otaniと申します。
ReplyDelete私も最近ファビコン作りにチャレンジしたのですが、こちらの記事がとても参考になりました、ありがとうございました！
また、私のblogの方でファビコン作りの記事を書いたのですが、その際勝手ながらリンクを貼らせていただきました。許可を頂く前のことで、申し訳ありません。
もしリンクNGの場合はお申し付けください。
今後も是非勉強の一環としてチェックさせていただきます！
失礼致します。
otani さん、はじめまして。
ReplyDelete旅に出ていて、返事コメントが遅れました。申し訳ないです。
favicon 作りのエントリー、拝見致しました。リンクは大歓迎です。ありがとうございます。自分に役に立ったことを、更に他の人の役に立ててもらう。そんな輪が広がるって、いいことですね。なんかハッピーな気分になります。これからも、どうぞよろしく。
テンプレ変えてファビコン入れ直してみましたー。thnx!
ReplyDelete> satomi
ReplyDeleteイェイ!
僕もこの記事でファビってみました（七）
ReplyDeleteおおっ。「七」だ。分かり易くてよいですね :)
ReplyDelete