2009年04月13日

ファビコンをつけてみた

 ファビコン(favicon)は、アドレスバーの頭などに表示される小さな画像のことです。ブログサービスによっては、デフォルトで画像が設定されているところもありますが、seesaaにはデフォルトのものはありません。

 その代わり、自分で好きなファビコンを作れるので、試しに作ってみました。私がつくった手順は次の通りです。

 

1.もとになる画像を作成

 ファビコン自体は拡張子が.icoのアイコンですが、まずはその元になる画像をつくります。ペイント系ソフトで正方形の画像をつくり、とりあえずjpgやgif、bmpといった形式で保存しておけば良いようです。

 私は、Photoshop Elementsで元画像を作成し、Photoshopのpsd形式と、jpg形式のデータを作成しました。

 

2.アイコンを作成する

 画像データを.icoに無料で変換してくれるサイトを利用しました。英語ですが「FavIcon from Pics」というサイトです。

 1.で作成した元画像をアップロードし、「Generate FavIcon.ico」ボタンを押すと、アイコンと、アイコンと同サイズのアニメーションgifを作ってくれます。結構、鮮明なものができます。

 ダウンロードは、これらが含まれたzip圧縮ファイルをダウンロードします。

 

3.ブログにアイコンをアップロードする

 2.でダウンロードした圧縮ファイルを解凍し「favicon.ico」をブログにアップロードします。アップロードは、管理画面の「記事投稿−ファイルマネージャ」から行います。

 アップロードした後、favicon.icoのフルパス名を控えておきます。フルパス名は、favicon.icoの横の「HTML」ボタンを押しソースをコピー → メモ帳にでも貼り付けてリンク先を見ると分かります。

 

4.HTMLを編集する

 3.でアップロードしたファイルを表示するには、HTMLに一行書き加える必要があります。HTML編集は管理画面の「デザイン−HTML」から行います。

 デフォルトHTMLを使用している場合は「HTMLの追加」を押します。すでにオリジナルHTMLを使用している場合は、それを編集します。

 HTMLに追加するのは、以下のソースです。<head>〜</head>の間に追加します。

 <link rel="shortcut icon" href="ファビコンのフルパス名" />

 

 追加した後は「保存」ボタンを押して変更を保存します。

 

−−

 以上の手順の後、ブログを表示すると、ファビコンが表示されているはずです。

 



posted by いさた at 01:26 | Comment(2) | TrackBack(0) | 独言工房的 実験室 | このブログの読者になる | 更新情報をチェックする

人気ブログランキングへ 【当ブログや記事を評価していただける方へ】
最後までお読みいただきありがとうございます。m(_"_)m
上のバナーをクリックしていただけると励みになります。

この記事へのコメント
> 管理人様

拙僧がブログを置いているgooですと「g」のマークに当たるものですね。シーサーには無かったんですね。そういえば、他のファビコンが無いブログと同じように表示されていました。
Posted by tenjin95 at 2009年04月13日 05:27
>tenjin95さん

>gooですと「g」のマークに当たるものですね。

そうです。

私が使っているfirefoxだと、ファビコンは問題なく表示されていますが、IE6では、このブログがお気に入りに登録されていないと表示されないようですね。

ブラウザによって表示に違いがあるようです。
Posted by いさた@管理人 at 2009年04月13日 10:16
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


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

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