2008年03月01日

Favicon(ファビコン)の作り方

ここ数日このブログ(貧ν民の一言レス)を弄っていました
何点かブログパーツを追加したりしたのですが、その中でも
気が付かれていないだろう、一番地味な変更点について紹介します

よく目にするブラウザでサイトを表示した時に表示される小さなアイコン
Favicon(ファビコン)と言うらしいのですが、せっかくブログを開設したので
それをこのブログにも付けてみました、作り方は以下の手順になります。

1.Faviconの元画像を作成する
2.画像をアイコン(.ico)に変換する
3.変換したアイコンをサーバにアップロードする
4.アップロードしたアイコンにリンクを設定する

元画像は最終的に16x16ピクセルの小さな画像となるため複雑なデザインはできません
そこでブログタイトルの「貧ν民の一言レス」のνを入れた単純なものにしました
vに見えるかもしれませんが、ギリシャ文字の小文字の”ニュー”です(^_^;

まあ複雑なデザインなんて作れないってのが本当の所ですが、Windows付属のペイントで
背景塗って、枠を囲って、テキスト貼り付けして、出来た画像がこれです


作成した画像は変換を行うために、GIFかPNG形式で保存を行うようです
そしてその画像をアイコン変換サイトのFavIcon from Picsで変換を行い、
変換されたアイコンファイルをサーバへアップロードを行います。
(Seesaaブログなら管理画面の「記事投稿」→「ファイルマネージャ」)

そしてブログのHTMLの<HEAD> 〜 </HEAD>の間に次のタグを追加する事で
アドレスバーなどにFaviconが表示されるようになります。
<link rel="shortcut icon" href="http://pickupblog.up.seesaa.net/image/favicon.ico">
(href=""の部分は自分の画像ファイルのアドレスを変えて下さい)

それ程難しくなくFaviconを作ることができました
付けてからブログへの愛着が一層増したように思います
みなさんご自分のブログにも付けてみてはいかがでしょうか^^

今回Faviconの作成は次のHPを参考にさせて頂きました。
TAG index - ホームページ作成情報
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/87776339

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

この広告は1年以上新しい記事の投稿がないブログに表示されております。