ファビコンの作成方法と適切なサイズとは？設定方法を分かりやすく解説

サイトをブックマークしたり、タブを表示したりする際にページタイトルの横に小さなアイコンが出てくることがないでしょうか。これをfavicon（ファビコン）といいます。

ファビコンの有無はSEO順位に影響されませんが、ユーザーにサイトを覚えられやすくなり、信頼度が増すなど、ユーザー体験の向上を狙うことができます。
サイトを作成する際にファビコンの設定は忘れてしまうこともあると思いますが、ブランディングに欠かせないものでもあるので、表示するようにしましょう。
この記事ではファビコンの仕組みや設定方法について説明します。

ファビコンとは

ファビコンは「Favorite icon（お気に入りアイコン）」の略語で、ブラウザではアドレスバーやタブなどに表示されます。タブを複数開いている状態だと、どのサイトのページかわからなくなってしまうこともありますが、ファビコンがあれば目印になってすぐに探すことができるでしょう。

スマホでは、ショートカット（ホーム画面からサイトに直接アクセスする方法）を作成した場合や検索結果にも表示されるので、ユーザーへの効果はより高くなるといえます。特にショートカットはアプリと同じようにホーム画面にアイコンで並ぶことになるので、ファビコンがないと違和感が出てしまいます。スマホユーザーをターゲットにしているようなサイトであれば、ファビコンの設定は必須ともいえるでしょう。

このようにファビコンはあらゆる場面でユーザーの目につく存在となっています。視覚に訴えることができるので、サイトの印象を植え付けやすくなり、ユーザーの潜在層に認知させることにもつながります。また、多くのサイトがファビコンを設定しているため、今ではあるのが当たり前といった感覚の人も多いかもしれません。個人のサイトであればなくても問題ありませんが、企業や公的機関など、不特定多数が利用するサイトであれば、ファビコンがあることでブランディング上の信頼を得ることにもつながります。

ファビコンのサイズ、フォーマット

ブラウザタブに表示されるファビコンのサイズは「16px×16px」が一般的ではありますが、ブラウザの種類によって異なる場合があります。また、iOS、Androidのホーム画面など、表示箇所によっても異なるので、複数の画像サイズを用意する必要があります。
一般的によく使われるサイズは下記の通りです。

• 16px×16 px：ChromeやInternet Explorerのブラウザタブ、Safariの履歴など
• 24 px×24 px：Internet Explorer 9のピン留めなど
• 32 px×32 px：ブックマークアイコンなど
• 180 px×180 px ：iOSのホーム画面など
• 256 px×256 px ：Androidのホーム画面など

このように、基本的にスマホ向けのファビコンはパソコンよりもサイズが大きいです。

ファビコンを作成する際は、ICO形式（.ico）で保存するようにしましょう。PNG形式も使用できますが、Internet Explorer 9（IE9）など対応していないブラウザもあるので注意が必要です。また、ICO形式だと、1つのファイルに複数画像を保存することができます。これをマルチアイコンといいます。複数の画像を1つにまとめることで、サーバー側で表示箇所ごとに最適なサイズを選択することができるようになります。

ファビコンを作成する際はICO形式で作成することと、複数の画像を1つのファイルにまとめるマルチアイコンを行うことを忘れないようにしてください。

ファビコンの設定方法

ファビコンを表示させるために、HTMLファイルのヘッダー部分にコードを記述していきます。ICO形式とPNG形式、そしてIE9の場合もコードが異なることに気をつけてください。

Chrome・IE11・Firefox・Safari・Opera・Edgeの場合

link rel="icon" href="/image/favicon.ico"

IE9の場合

link rel="icon" type="image/vnd.microsoft.icon" href="/image/favicon.ico"

ファビコン作成ツール、マルチアイコン作成ツールの紹介

ファビコンの作成方法は2パターン。ツールを使ってファビコンを新たにデザインする方法と、すでに持っている画像を整えてファビコンとして使用する方法があります。
ここで紹介するツールは全て無料で利用でき、ダウンロードが不要なものです。

ファビコン作成ツール

favicon.cc

会員登録不要でファビコンを作成することができるツールです。画面右から色を選択し、真ん中のスペースにデザインします。画面下から、描いた画像が実際にどう表示されるかプレビューの確認もできます。完成したら、プレビュー下にあるダウンロードを選択するとファイルがICO形式で保存できます。

＞favicon.cc

ICONSFLOW

こちらはダウンロードする際に会員登録が必要となります。
まず「Create Amazing Icons!」を選択します。動物の形やラインなど、テンプレートがいくつか用意されているので、アイデアが固まっていない状態でも作成することができます。土台となるデザインが決まったら「Edit」を選択して編集を行いましょう。グラデーションやエフェクトの設定も簡単にできます。編集が完了したら右上の「Apply」を選択すればダウンロードができます。

＞ICONSFLOW

マルチアイコン作成ツール

favicon.icoを作ろう！

画像をアップロードするとファイルをICO形式に変換してくれるツールです。すでに素材となる画像を持っている場合におすすめです。対応しているファイルはPNG、GIF、JPEG、BMPですが、対応しているサイズが「16px×16 px」「32 px×32 px」「48 px×48 px」のみなので、スマホ向けのファビコンは作成できません。ブラウザ用のファビコンのみを素早く作成したい時に活用するといいでしょう。

＞favicon.icoを作ろう！

favicon generator

こちらも手持ちの画像をアップロードするとファイルをICO形式に変換してくれるツールで、「favicon.icoを作ろう！」よりもサイズは豊富です。「16px×16 px」「32 px×32 px」「48 px×48 px」「68 px×68 px」のマルチアイコンと「16 px×16 px」「32 px×32 px」「48 px×48 px」「57 px×57 px」「64 px×64 px」「72 px×72 px」「114 px×114 px」「120 px×120 px」「144 px×144 px」「152 px×152 px」「256 px×256 px」のスマホ向けファビコンが作成されます。

HTMLファイルも一緒に作成してくれるので、コードをそのまま使用できます。

＞favicon generator

ファビコン作成時の注意点

デザインはシンプルに

ファビコンは小さく表示されるので、細かな部分はほとんど見られません。複雑なデザインを避け、シンプルなデザインにすることをおすすめします。また、ツールを使用してファビコンを作成する場合は、ドットを整えていないとぼやけて表示されてしまうので注意しましょう。

BASIC認証があると表示されない場合がある

サイトにBASIC認証をかけていると、ファビコンが表示されないことがあります。ちなみにBASIC認証とは、サイトにアクセス制限をかける認証方法のことです。該当のサイトにアクセスするとユーザー名（ID）とパスワードが求められ、許可したユーザー以外は閲覧できないという仕組みです。
この場合はBASIC認証を解除することで表示されます。

画像は正方形がおすすめ

ファビコンは表示形式に合わせて、正方形のものを選ぶようにしましょう。正方形ではない画像をお持ちの場合は、ツールによっては自動で正方形に調整してくれるものもありますが、デザインイメージが変わってしまう場合もあるので、あらかじめ正方形で用意しておいた方が無難です。

スマホでは角がなくなる

スマホでショートカットを作成すると、アプリのアイコンと同じように角丸のファビコンが表示されます。画面の四隅まで広がったデザインだと、その部分が削られてイメージが変わってしまうことがあるので、余白を作っておくようにしましょう。

ファビコンはユーザーの意識を変えるアイテム

ファビコンは設定しなくてもサイト運用において大きな影響を及ぼすことはありません。しかし、設置することでユーザーの記憶に残りやすくなり、リピーターにつながることがあります。

ネットユーザーの多くは、常に無意識に多くのファビコンを見ており、それがサイト利用の行動を促す結果につながることもあります。例えば、お気に入りに登録してあるサイトがアイコンで判別できればスムーズにサイトにアクセスすることができますよね。

今回紹介したように、初心者でも簡単に作成できるツールがあるので、自作ノサイトをお持ちの方は試してみてはいかがでしょうか。