カスタム検索

2009年09月22日

ブログにファビコンを設置しました

ホームページを「お気に入りに登録」すると、サイト
タイトルの左側に「ちっさい絵みたいの」が表示され
ますよね。

例えば「楽天市場」なら赤丸にRの文字、MSNなら
カラフルな蝶々が飛んでいます。

この「ちっさい絵みたいの」を「fabicon(ファビコン)」
というのですが、これがあると便利だなーといつも
思います。

縦にずらーっと並んだ「お気に入り」の中から目当ての
サイトを探すのに、一瞬で見つかりますもんね。

このファビコンというのは、個人のブログなどにも表示
させることが出来るんですね。

「私も置いてみたーい」と思って、作ってみました。

いろいろ調べてみると、簡単なのは二通りあるみたいです。
1.写真や画像をファビコンに変換するやり方
2.ドット絵で好きなように作るやり方

はじめは、実家のビーグル犬の写真をファビコンにしようと
思ったのですけど、さすがに小さくなりすぎて犬の顔が
「目・目・鼻」の点々∵にしか見えません。カワイソウ。

なので、今回は「2.ドット絵で好きなように作る」を
採用しました。

<作り方>
●参考:[を] Firefox で使える favicon エディタ
http://chalow.net/2006-04-17-3.html

http://tokyoenvious.xrea.jp/javascript/favicon/
このサイトへ行き、好きな色を選んでマス目を塗って
いきます。ポチポチと1個づつ塗るだけでなく、ドラッグで
広範囲を塗ることもできます。tracksというブログなので
「とら」と表現することにしました。プレビュー表示
で確認しながら塗り塗り。わりとすぐ出来たよ。

JavaScript Favicon Generator

出来たら、PCなりに保存します。ここから先は、こちらの
サイトを参考にさせていただきました。

●参考:seesaaブログでファビコンを表示させる方法
http://designwork-s.com/article/35794197.html
1.ファイルをアップロード
seesaaの記事投稿→ファイルマネージャから作成した.icoをアップロードします。
2..icoの絶対パスを取得
アップロードしたicoの絶対アドレスをメモもしくはコピーして
おきます。
3.HTMLの変更
<link rel="shortcut icon" href="アップロードしたアドレス">
上記の一文をHTMLの<head>と</head>の間に加えます。
4.再構築
以上で完了です。問題なければ閲覧時にファビコンが表示されて
いるはずですのでご確認ください。

はい、確認しました。おぉ。表示されておる。やった。

ついでに、今回あきらめた、1.写真や画像をファビコン
に変換するやり方も載せておきます。

●参考:[を] 久しぶりにfaviconを作った
http://chalow.net/2006-04-16-2.html

http://www.chami.com/html-kit/services/favicon/
このサイトへ行き、ファビコン化したい画像を選んで
「参照」をクリック、次に「Generate FavIcon.ico」
をクリックで作ることができます。あとは同じ。保存して
HTMLに加えるだけです。

ご参考にさせていただいたサイトのみなさま、ありがとう
ございました!






posted by りすきぃ at 19:10 | Comment(1) | TrackBack(0) | インターネット
この記事へのコメント
とっても気になってました(^−^)
「fabicon(ファビコン)」
そんな名前だったんですね〜♪
りすきぃさんの「ごはんなう」にもありますよね^^
Posted by チョマ at 2009年09月22日 22:30
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス: [必須入力]

コメント: [必須入力]


この記事へのトラックバック