Webサイトのタブや、ブックマークに表示される小さな「ファビコン」。目立たない存在ですが、意外とユーザーの記憶に残る部分でもあります。
この記事では、ロゴやサイト名からファビコンをデザインし、作成する方法を解説します。特別なツールや高度なデザインスキルがなくても大丈夫です。
まずは、基本的な知識から順番に見ていきましょう。
目次
ファビコンとは
ファビコンとは、ブラウザのタブやブックマーク一覧、スマホのホーム画面などに表示される小さなアイコンのことです。
役割
小さなアイコンですが、次のような役割があります。
- 複数ページを開いていてもタブで判別できる
- ブックマーク一覧で他サイトと差別化できる
- ブランドイメージやカラーを印象付けられる
見た目の装飾としてだけでなく、ユーザー体験の一部も担っているんですよね。
画像フォーマット（拡張子）
ファビコンの拡張子は、従来はico形式が主流でしたが、今はPNG形式のファビコンで問題ありません。
WordPressでは、512 × 512のPNG画像を設定するだけで、各種サイズに自動変換してくれます。一般的なサイト運営ではPNG形式で作成して問題ないでしょう。
ファビコンのデザインアイデア
小さいファビコンは、細かい装飾よりもパッと見て分かることが大切です。
あらかじめロゴやサイト名を用意しておけば、以下でご紹介するデザインアイデアも試しやすくなります。
サイト名の頭文字を使う
サイト名がアルファベットの場合は、頭文字を使うのが定番です。シンプルでも、フォントや色使いで十分に個性を出せます。
Googleのファビコン
Googleは、頭文字「G」にブランドカラーを配色していますね。
ロゴの一部を抜き出す・シンプル化
ロゴが複雑な場合は、シンボル部分だけを抜き出して使いましょう。線を太さを変える・装飾を省くなどミニマルにアレンジするのも一つの手法です。
Amazonのファビコン
Amazonの場合、ロゴから「a」という文字と、オレンジ色の矢印のみを抜き出しています。
Amazonのロゴ
ブランドカラーを背景色に
サイトのブランドカラーを背景色に採用するケースもよくあります。LINEのファビコンがいい例です。
LINEのファビコン
今や誰もが、LINEのブランドカラーを認知しているため、サイトのファビコンにもピッタリです。
モノクロ・白抜き
白背景に文字を配置するだけ、もしくは反転させて白抜きにするなど、極めてシンプルなアイデアです。背景色に左右されにくいため、どんなデバイスでも一貫して視認性を保ちやすいのが特長です。
当サイトのファビコン
配色のバランスに悩む必要がなく、初心者でも失敗しにくい手法ともいえます。
業種を連想させるモチーフ
たとえば、美・理容室ならハサミ、カフェならコーヒーカップなどです。
理容室のファビコン
誰もが直感的に業種をイメージできるモチーフなら、ファビコンに使えますね。フリーのファビコン素材サイトなども利用できます。
Canvaでファビコンをつくってみよう
Photoshopなどは不要です。Canvaなどの無料ツールで十分作成できます。初めての方はCanvaに登録しておきましょう。
読者に自分の記事を見つけてもらうのに重要な役割をアイキャッチ画像は担っています。それもそのはずで、記事タイトルはもちろん、アイキャッチ画像ひとつで記事ページを開いてくれる読者の数も大きく変化するからです。事実、TCDブログ内の記事もアイキャッチ画像ひとつで記事のクリック率が3倍ほど膨れ上がった事例が...
新規作成から、「ロゴ」を選択しましょう。
無料プランでは「500 × 500px」までしかつくれませんが、ファビコンに使う分には問題なしです。
今回は、シンプルにファビコン（Favicon）の「F」でいきます。シンプルに頭文字を入力するだけです。
このとき、以下2つのポイントだけは押さえておきましょう。
- 背景に対してカツカツにしない
- 中央に配置する
Canvaなら背景色を変えたり、フォントも選べるので、色々試してみてください。
編集が済んだら、右上の「共有」を開いてダウンロードします。
このとき、サイズが500 × 500pxになっていることを確認しておきましょう。
次のようなファビコンが、ダウンロードできれば完成です。
ファビコンのサンプル
あとは、完成したファビコンをサイトに設定すればOKです。
WordPressの場合は、ダッシュボードの「外観 > カスタマイズ > サイト基本情報 > サイトアイコン」よりアップロードできます。
画像の推奨サイズは「512 × 512px」と表示されていますが、Canvaの500px四方でも問題ありません。
詳しい設定方法は、以下の記事でも解説しています。
ファビコンを設定するのって意外と大変なんですよね。ファビコン用の画像を作成するだけでなく、少し特殊な形式「.ico」の画像も用意しなければいけない。 もっと手軽に設定したいとお考えの方は、WordPress（ver4.3以降）に標準で備わっているサイトアイコン設定機能を使ってみましょう。 ...
ファビコンを設定してプロらしいサイトに
ファビコンのデザインアイデアや、かんたんなつくり方をご紹介しました。
シンプルなものであれば、無料ツールでも十分に対応できます。数十分あれば用意できる小さなアイコンですが、未設定のままだと、どうしても素人感が出てしまうもの。
ロゴやサイト名をベースに、ぜひファビコンをつくってみてください。
こんなアイコンジェネレーターを利用するのもいいかもしれません。
この記事では、無料でロゴが作れる12個のジェネレーターツールをご紹介します。 今の時代、ロゴ作成は無料で簡単にできます。本格的なロゴはプロのデザイナーに依頼したほうがいいかもしれませんが、ビジネスやWebサイト立ち上げ初期の段階では、コストカットやスピードを優先して無料ツールで作成したロゴを使...
WordPressテーマ集
コメント