タイトルの左側に「ちっさい絵みたいの」が表示され
ますよね。
例えば「楽天市場」なら赤丸にRの文字、MSNなら
カラフルな蝶々が飛んでいます。
この「ちっさい絵みたいの」を「fabicon(ファビコン)」
というのですが、これがあると便利だなーといつも
思います。
縦にずらーっと並んだ「お気に入り」の中から目当ての
サイトを探すのに、一瞬で見つかりますもんね。
このファビコンというのは、個人のブログなどにも表示
させることが出来るんですね。
「私も置いてみたーい」と思って、作ってみました。
いろいろ調べてみると、簡単なのは二通りあるみたいです。
1.写真や画像をファビコンに変換するやり方
2.ドット絵で好きなように作るやり方
はじめは、実家のビーグル犬の写真をファビコンにしようと
思ったのですけど、さすがに小さくなりすぎて犬の顔が
「目・目・鼻」の点々∵にしか見えません。カワイソウ。
なので、今回は「2.ドット絵で好きなように作る」を
採用しました。
<作り方>
●参考:[を] Firefox で使える favicon エディタ
http://chalow.net/2006-04-17-3.html
http://tokyoenvious.xrea.jp/javascript/favicon/
このサイトへ行き、好きな色を選んでマス目を塗って
いきます。ポチポチと1個づつ塗るだけでなく、ドラッグで
広範囲を塗ることもできます。tracksというブログなので
「とら」と表現することにしました。プレビュー表示
で確認しながら塗り塗り。わりとすぐ出来たよ。
出来たら、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に加えるだけです。
ご参考にさせていただいたサイトのみなさま、ありがとう
ございました!