デザイン ファビコンのデザインを比較検証してみる。

どうも、なみぞうです。

本日はホームページやブログのシンボルである【ファビコン(favicon)】のデザインについて見ていこうと思います。

ファビコンの作り方・設定方法などはすでに詳しく説明されているブログ記事があるので、「ファビコン 作り方」「ファビコン 設定方法」などでググって他ブログで調べてくださいね。

この記事ではファビコンのデザインに注目して検証していきます。
ご自身のサイト・ブログのファビコンに迷った時にはぜひ参考にしてください。

いつもfavicon作成時に利用させていただいているサイト
favicon generator (https://ao-system.net/favicongenerator/)

ホームページやブログのシンボルとしてのファビコン

favorite icon

ファビコンとは、下図の赤丸のやつです。

ホームページのファビコン

そう、みなさん普段気にせずとも、必ず見ているやつです。
ホームページやブログのロゴ・シンボル・アイコンのような役割で利用されております。
ブラウザで複数タブを開いているとどのタブがどれかとかわからなくなることありますよ?
そういう時にこのファビコンがあれば、一目で判別できるのです。

さらに近年ではファビコンと同じく、スマートフォンユーザーの為のホーム画面用アイコンも重要視されております。
正式名【Web Clip(ウェブクリップ)】といいます。
apple-touch-icon.pngとして作られるといったほうが、作り手側にはわかりやすいですね。

ホームページやブログをお気に入り登録したり、ホーム画面に追加したりすると表示されるあれです。アプリのアイコンみたいなやつですね。

スマホホーム画面

ファビコンと一緒に設定されることも多いので、ファビコンを考える際にはこのホーム画面用アイコンも同時に考えていければいいと思います。(それぞれ大きさが異なるのでデザインをわけている場合も多いですが)
また、設定がされていないサイトやブログの場合はこのアイコンはWebサイトのスクリーンショットになります。

さた、ここまで基本的なファビコンとはという説明ですが、ここからは実際にホームページやブログはどのようなファビコンを設定しているかどうかを比較してこうと思います。

ファビコンをパターン分けして比較する

見比べているとファビコンデザインの考え方はいくつかパターンに分けられています。
大手企業も個人ブログもだいたい大きく分けて3つに分けることが可能です。

どんなサイトがどんなファビコンを設定しているか見ていきます。

ぜひ皆さまもこのファビコンは何のサイト、何のブログがとか気にしながら見ていってくださいませ。

1:頭文字を利用する

当デザインを採用しているサイトの特徴
  • サイトの一文字目の画数が少なめ
  • 一文字目が英語の場合が多い
  • 読み物系のサイトに多い
  • サイト・企業の売りがデザイン要素ではない

何と言っても特徴は

ファビコンを見ただけでサイト名がわかる

ということでしょう。

そんなファビコンを採用しているサイト・ブログの一例がこちら

頭文字を利用する
Googleに始まり、yahooやamazon、ウィキペディアなどが採用しています。

ちなみにひときわ目立つ「」のファビコンは昔SEOについていろいろ勉強させていただいた「俺のSEO対策」さんです。

その横の「T.」はホリエモンさんの「HORIEMON.COM」でございます。

2:サイトロゴやシンボルをそのまま、もしくは一部を利用

サイトロゴをシンボルマークではなく、サイト名としている場合は結構パターン1と似ているような部分もあるので難しいですがよりアイコンチックなものをここに分類しています。

当デザインを採用しているサイトの特徴
  • シンボルマークが特徴的なサイトに多い
  • シンボルマークが広く認知されているサイトに多い
  • デザイン要素にもこだわりがある

個人ブロガーさんなんかは結構ここに分類されがちです。
手書きのほんわかファビコンなんてものも多いですね。

そんなファビコンを採用しているサイト・ブログの一例がこちら

サイトロゴやシンボルをそのまま、もしくは一部を利用

SNSはもうアイコンありきなのでファビコンもバチっとアイコンで統一しています。

また、ここのファビコンは見ていて楽しいかったりもします。

今日はヒトデ祭りだぞ!」で有名なヒトデさんはそのままファビコンになっていますし、私もtwitterの運用方法をよく勉強させていただいているアフィラさんの「作業ロケット」もロケットがファビコンです。

ファビコンの複雑さ的には「gori.me」さんのゴリラががギリギリですかね。

これ以上複雑化してしまうと、あの小さいサイズで表現できなくなってしまいますね。

3:直接ロゴではないがサイトイメージのシンボル化

このパターンが実は一番柔軟性あります。
なかなか認知していただくまでに時間がかかりがちなのがデメリットですね。(一部特殊な例を除く)

遊び心あって、ファビコンに特にこだわっていない場合もこのパターンになるのだと思います。

当デザインを採用しているサイトの特徴
  • 色で特徴を出せるサイトに多い
  • 特にロゴがない場合
  • デザイン要素にもこだわりがある
  • 遊び心あり

そんなファビコンを採用しているサイト・ブログの一例がこちら
直接ロゴではないがサイトイメージのシンボル化

とりあえず、マリオはずるいですね。

当然任天堂さんです。

一番左は電通です。

その他結構有名ブロガーさんは自由にファビコンを設定している場合も多いようですね。
どれがどのブロガーさんかわかりますでしょうか??

ノマド的節約術」さんなんて素敵ですよね。

ブログのメインカラーとサブカラーをそのままファビコンに落とし込んで、すっごくシンプルなのに知っている人であればピンと来るみたいな感じに作り上げております。

コーポレートサイトやブログに見る、ファビコンの決め方

ブランディングとしてのファビコン

まず最初に考えなくてはならないのは「サイトにロゴやシンボルマークはあるのか」という点でしょう。

このロゴやシンボルマークがすでに認知度が高い。もしくは今後は積極的にアピールしていきたいという場合は、そのままファビコンに落とし込んでしまう場合が最も多いです。

しかし、そもそもこれが存在しない場合は選択肢が狭まってしまいます。
コーポレートサイトの場合はあることも多いとは思いますが、個人ブログの場合はなかなかありません。

その場合ついつい、【サイトの頭文字の一文字をファビコンにする】パターンになりがちです。
しかし最小で16ピクセルで表示されるファビコンですので漢字を利用するともうごちゃごちゃってなってしまいます。

さらに、最初の一文字だとだいたい他サイトとかぶりますし。

個人ブロガーさんの場合はやはり独自性が重要視されますので、そうなるとサイトのイメージに合うようなイラストやベクターを利用するケースが多くなっていくのでしょう。

ファビコンの設置は、【ブランディングの一つ】です。

結局は、個人ブロガーにとっての1番の目的となっていく【自社ブランド(ブログ)をユーザーに覚えてもらいたい】ことを考えると、これが一番理にかなっているんですよね。

普段他サイトをみて回る際もなかなか意識しないファビコンではございますが、絶対に視界には入っているんです。

コーポレートサイトを作られたデザイナーさんも、企業のブランディング担当者も、有名ブロガーさんも、おそらくあの小さいスペースのデザインを決定するのに様々な思いを乗せていらっしゃいます。

もしまだファビコンを設定していない方がいらっしゃれば、是非日頃から他サイトのファビコンを意識しながらみてくださいませ。

最近の個人的マイブーム紹介

どうもなみぞうです。
最近はもっぱらswitchで【どうぶつの森】と【リングフィットアドベンチャー】を交互に楽しんでおります。

「そんな暇あるならブログ書け?」

いや、全くその通りでございます。
けれど癒しと運動がなくては人間は発狂してしまうので許してくださいませ。

おすすめの記事