【初心者向け】ファビコンのデザイン方法｜ロゴ・サイト名からかんたん作成

Webサイトのタブや、ブックマークに表示される小さな「ファビコン」。目立たない存在ですが、意外とユーザーの記憶に残る部分でもあります。

この記事では、ロゴやサイト名からファビコンをデザインし、作成する方法を解説します。特別なツールや高度なデザインスキルがなくても大丈夫です。

まずは、基本的な知識から順番に見ていきましょう。

ファビコンとは

ファビコンとは、ブラウザのタブやブックマーク一覧、スマホのホーム画面などに表示される小さなアイコンのことです。

役割

小さなアイコンですが、次のような役割があります。

• 複数ページを開いていてもタブで判別できる
• ブックマーク一覧で他サイトと差別化できる
• ブランドイメージやカラーを印象付けられる

見た目の装飾としてだけでなく、ユーザー体験の一部も担っているんですよね。

画像フォーマット（拡張子）

ファビコンの拡張子は、従来はico形式が主流でしたが、今はPNG形式のファビコンで問題ありません。

WordPressでは、512 × 512のPNG画像を設定するだけで、各種サイズに自動変換してくれます。一般的なサイト運営ではPNG形式で作成して問題ないでしょう。

ファビコンのデザインアイデア

小さいファビコンは、細かい装飾よりもパッと見て分かることが大切です。

あらかじめロゴやサイト名を用意しておけば、以下でご紹介するデザインアイデアも試しやすくなります。

• サイト名の頭文字を使う
• ロゴの一部を抜き出す
• ブランドカラーを背景色に
• モノクロ・白抜き
• 業種を連想させるモチーフ

サイト名の頭文字を使う

サイト名がアルファベットの場合は、頭文字を使うのが定番です。シンプルでも、フォントや色使いで十分に個性を出せます。

Googleは、頭文字「G」にブランドカラーを配色していますね。

ロゴの一部を抜き出す・シンプル化

ロゴが複雑な場合は、シンボル部分だけを抜き出して使いましょう。線を太さを変える・装飾を省くなどミニマルにアレンジするのも一つの手法です。

Amazonの場合、ロゴから「a」という文字と、オレンジ色の矢印のみを抜き出しています。

ブランドカラーを背景色に

サイトのブランドカラーを背景色に採用するケースもよくあります。LINEのファビコンがいい例です。

今や誰もが、LINEのブランドカラーを認知しているため、サイトのファビコンにもピッタリです。

モノクロ・白抜き

白背景に文字を配置するだけ、もしくは反転させて白抜きにするなど、極めてシンプルなアイデアです。背景色に左右されにくいため、どんなデバイスでも一貫して視認性を保ちやすいのが特長です。

配色のバランスに悩む必要がなく、初心者でも失敗しにくい手法ともいえます。

業種を連想させるモチーフ

たとえば、美・理容室ならハサミ、カフェならコーヒーカップなどです。

誰もが直感的に業種をイメージできるモチーフなら、ファビコンに使えますね。フリーのファビコン素材サイトなども利用できます。

Canvaでファビコンをつくってみよう

Photoshopなどは不要です。Canvaなどの無料ツールで十分作成できます。初めての方はCanvaに登録しておきましょう。

新規作成から、「ロゴ」を選択しましょう。

無料プランでは「500 × 500px」までしかつくれませんが、ファビコンに使う分には問題なしです。

今回は、シンプルにファビコン（Favicon）の「F」でいきます。シンプルに頭文字を入力するだけです。

このとき、以下2つのポイントだけは押さえておきましょう。

• 背景に対してカツカツにしない
• 中央に配置する

Canvaなら背景色を変えたり、フォントも選べるので、色々試してみてください。

編集が済んだら、右上の「共有」を開いてダウンロードします。

このとき、サイズが500 × 500pxになっていることを確認しておきましょう。

次のようなファビコンが、ダウンロードできれば完成です。

あとは、完成したファビコンをサイトに設定すればOKです。

WordPressの場合は、ダッシュボードの「外観 > カスタマイズ > サイト基本情報 > サイトアイコン」よりアップロードできます。

画像の推奨サイズは「512 × 512px」と表示されていますが、Canvaの500px四方でも問題ありません。

詳しい設定方法は、以下の記事でも解説しています。

ファビコンを設定してプロらしいサイトに

ファビコンのデザインアイデアや、かんたんなつくり方をご紹介しました。

シンプルなものであれば、無料ツールでも十分に対応できます。数十分あれば用意できる小さなアイコンですが、未設定のままだと、どうしても素人感が出てしまうもの。

ロゴやサイト名をベースに、ぜひファビコンをつくってみてください。

こんなアイコンジェネレーターを利用するのもいいかもしれません。