ファビコン一つで違いを作れる

インターネットをしている時にタブの横に表示されるマークをご存じですか。

ファビコンと呼びます。有名サイト(amazonや楽天)でサイトのイメージを表すようなデザインになっています。

ファビコンでブックマークに違いを

ファビコンを設置していると目立つ

ファビコンを設置しているサイトでは、ブラウザーのタブにファビコンが表示されます。また、ブックマーク一覧を表示した際にもファビコンが表示されます。

サイトイメージを表現している

ファビコンを設置していないサイトと比べると、その存在感は圧倒的です。無機質な青色や赤などのブックマークリストとサイトイメージでは印象が大きく変わります。

ファビコンを設置していないと無機質なイメージ

 

ブックマークの中でも他社との違いを生みだすものがファビコンなのです。

 

意外と簡単に作れるファビコン

実は意外と簡単にファビコンは作れます。ブラウザが指定するサイズの画像を作成しfavicon.icoという名前で公開すれば良いのです。

ファビコン画像を作るには無料のサービスを紹介します。

 

ファビコン favicon.icoを作ろう!

ファビコンの作成

指定した大きさの画像がアイコン内に作成されます。サポートしている元画像のフォーマットは PNG, GIF, JPG(JPEG), BMP です。

1.ファビコン画像ファイルを選択(16×16、32×32、48×48ピクセル)

2.「favicon.ico作成」ボタンを押す

 

ファビコンの設置

1.作成したファビコンをドメインのルートに設置する(http://example.com/favicon.ico)。

2.ホームページの<head>セクションに下記のコードを追加する。

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”/favicon.ico” type=”image/vnd.microsoft.icon”>

 

たったこれだけでファビコン作成と設置は完了です。

皆さんもチャレンジしてみましょう。

Facebooktwittergoogle_plus