ビジネスとIT活用に役立つブログBlog


Webサイトのトレードマーク「ファビコン」の役割と事例紹介

この記事をシェアする:

Webサイトにファビコンは設置していますか?
ファビコンはWebサイトのシンボルマークとなり、ブランディングにも効果的です。

今回は、ファビコンの役割と設置方法と設置事例を紹介していきます。

ファビコンとは

ファビコンとは、Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されるアイコンのことです。

Internet Explorerの場合

Google Chromeの場合

ファビコンは、お気に入り(favorite)に登録したときに表示されるアイコン(icon)という意味で、favorite icon(フェイバリット・アイコン)が縮約して、favicon(ファビコン)と呼ぶようになったのが名前の由来とされています。

ファビコンを設置することで複数のタブを開いてWebページの閲覧しているときや、お気に入り(Google Chromeの場合はブックマーク)を表示させた際にサイトやページを判別する目印となります。

お気に入り(ブックマークリスト)

ファビコンの作成・設置方法

ファビコン画像作成のコツ

ファビコンは、Webサイトの内容が伝わるシンボルマークとなるものを作成します。また、小さいアイコンのため、複雑なものや色数の多いものは避け、シンプルでわかりやすいものが好ましいです。

ファビコンの画像サイズ

ファビコンのサイズは、ブラウザやデバイスによってちがいますが、弊社作成のWebサイトでは下記の3種類を作成しています。

16px×16px Internet explorerのタブ
32px×32px Chrome、Firefox、Safariなどのタブ
48px×48px Windowsのサイトアイコン

ファビコンのフォーマット

ファビコンには、「.ico」というフォーマットを使用します。pngやgifでファビコン用の画像を作成し、画像変換サービス等を使用し.icoに変換します。弊社では以下のサービスを利用しています。

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

ファビコンの設置

ファビコンを表示させるには、head部分に以下の記述を追加します。

記述例(弊社Webサイトの例)

事例紹介

実際のWebページのファビコンについて紹介します。

ロゴマーク

いちばん多く見られたのは、ロゴマークをファビコンに設定しているWebサイトでした。

大阪音楽大学

静岡市立静岡病院

トヨタ自動車

ロゴの1文字のみ

ロゴマークではなく、ファビコンの画像サイズを考慮して会社のロゴマークの頭文字をファビコンにしているWebサイトも見られました。

江崎グリコ(g)

シャープ(s)

カバヤ食品(K)

その他のユニークなファビコン

任天堂

マリオです。任天堂を代表するゲームキャラクターです。

任天堂

カルビー/永谷園

カルビーはポテトチップスのうすしお味、永谷園はお茶づけと代表的な商品をファビコンにしています。ミニチュア感がたまらなくかわいいです。

カルビー

永谷園

深谷市

都道府県や市区町村のWebサイトのほとんどが都道府県章や市町村章をファビコンにしていますが、埼玉県深谷市のWebサイトでご当地ゆるキャラ「ふっかちゃん」発見しました。

深谷市

Googleカレンダー

Googleカレンダーのファビコンは、日付の“日”が表示されます。

Googleカレンダー

まとめ

  • ファビコンとは、Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されるアイコンのこと
  • お気に入り(ブックマーク)リストを表示した際にもファビコンが表示される
  • Webサイトの内容が伝わるシンボルマークとなるものを作成する
  • ファビコンは小さいアイコンのため、シンプルでわかりやすいものが好ましい
  • ファビコンのフォーマットは「.ico」を使用する
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!