Posts Tagged ‘ホームページ’
ファビコンでちょこっとメイクアップしませんか！
ファビコンってご存知ですか？
google chrome やIE,Firefox等のwebブラウザの
タイトル名の左横に表示されているかわいいロゴ
マークみたいな小さな画像です。
これがあると、ホームページの印象が全然違うと
思いませんか。
何度も同じサイトを訪れていると、このファビコンが
表示されるだけで、特定のサイトを表示していると、
暗黙の了解みたいに潜在意識が、認識しています
よね。
webブラウザで、複数のサイトを同時に処理してい
る時に、チラッとファビコンを見ただけで、一瞬でタ
ブの選択が出来たり処理効率にも役立ったりしてい
ます。
勿論、それだけではなく画像処理で、際立った特別
なファビコンを作成したら、サイトのコンバージョンも
上向きになるかもしれませんね。
では、早速、そのファビコンの作成に取り掛かりま
しょう。
先ず、最初の手順になりますが、ファビコンにした
い縦と横が同じサイズのgifやjpg、png形式の画像
を用意します。
次に、その画像をico形式で、サイズが16x16の画
像に変換します。
さて、ファビコンにしたい画像が、用意出来たら、
以下のサイトで簡単にファビコンが作成できます。
http://tools.dynamicdrive.com/favicon/
サイトが表示されたら、ファビコンにしたい画像
ファイルを選択し、Create Iconボタンをクリック
するだけで、作成されます。
作成されたファビコンは、Create Iconボタンの直ぐ
下で確認できます。
OKなら、さらに下にあるDownload FavIconボタン
をクリックして、ダウンロード出来ます。
webブラウザで自分のサイトのファビコンを表示さ
せるには、作成したファビコンをサーバーにアップ
ロードしなければなりません。
ファビコン用にサーバーに特定のフォルダーを作
成したり、いつもの画像用フォルダーに他の画像
と一緒のフォルダーにアップロードするなどして、
自分で、どのフォルダーにアップロードしたかを分
かるようにして下さい。
アップロードしたら、今度はHTMLファイルに以下
のタグを<head>タグと</head>タグの間に挿入します。
<link rel=”shortcut icon” href=”このURLはファビコンをアップロードしたURL”>
以下に簡単な例を示しましたので、参考にして下さい。
—————————————————————————————
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>ファビコンの設置</title>
<link rel="shortcut icon" href="http://domain.com/favicon/favicon.ico">
</head>
<body>
—————————————————————————————–
赤色のタグが挿入したファビコン用のタグです。
この場合は、サーバー上のdomain.comにfavicon
というフォルダーを作成し、faviconフォルダーに
favicon.icoというファビコンをアップロードをしました。
以上で、説明は終了です。
それでは、ホームページのファビコンの出来映えを
ご確認して下さい。
