ファビコンとは？設定方法や効果を解説！おすすめの作成ツール

ファビコンを設置して、うまく活用することは、Webサイトを最大限活用する上で重要な要素です。

この記事では、ファビコンの概要をはじめ、効果や設置方法、よくあるトラブルと対処方法について解説します。

■あわせて読みたい資料：“BtoBマーケティング”を本格的に行いたいという方向け
→BtoBマーケティング実践ガイド

ファビコンとは

ファビコンとは、ブラウザのタブなどに表示されるWebサイトのアイコンのことです。ファビコンはWebサイトのイメージを表現でき、設置にも複雑な作業を伴いません。そのため、Webサイトを作成した際はファビコンも設置することがおすすめです。

ファビコンが表示される場所はさまざま

ファビコンが表示される場所は、主に以下の通りです。

• ブラウザのタブ
• ブラウザのホーム画面（ブックマークやお気に入りなど）
• パソコンのショートカット

場所によってファビコンのサイズが異なります。代表的なサイズとしては、ブラウザのタブが「16px × 16px」、パソコンのショートカットが「32px × 32px」です。

ファビコンに使用する画像は「ICO形式」が便利

表示させたい場所に応じたサイズのファビコンを作成しても問題ありませんが、それぞれのファビコンを作成するには手間がかかります。そのため、複数のサイズに1つのファイルで対応できる「ICO形式」が便利です。

ファビコンは一目で分かるデザインにする

ファビコンのサイズは非常に小さいため、細かいデザインにこだわるより、一目で認識できるようなデザインが最適でしょう。細かくデザインしても、こだわった部分はユーザーまで届かない可能性があります。
そのため、ワンポイントで目立ち、他のWebサイトとは異なるファビコンを作成することが重要です。

ファビコンで得られる効果

ファビコンを設置することで、どのような効果を得られるのか解説します。

Webサイトの認知度を高められる

ファビコンはWebサイトを開いている間、タブ上に色や形を用いて表示されるため、タイトルよりも目立って感じることがあります。そのため、Webサイトをファビコンで認識することもあり、Webサイトの認知度向上につながるのです。
また、ユーザーもファビコンがあれば、どのWebサイトを閲覧しているかすぐに認識可能です。

リピーター獲得につながる

Webサイトには悪質なサイトも存在しており、ユーザーもWebサイト内の情報が確かなものなのかを常に判断しています。そのため、ファビコンが設置されていないWebサイトより、ファビコンが設置され細部までこだわったWebサイトのほうが安心感を抱きます。

また、異なるページでも同じWebサイト内であれば同様のファビコンが表示され、「何度も同じWebサイトを訪問している」という親近感も沸くでしょう。

このように、ユーザーに安心感や親近感を提供することで信頼性を高め、「またこのWebサイトを利用したい」とリピーター獲得につながるのです。

Webサイトのブランディングができる

ファビコンは自由にデザインできるため、企業独自のロゴや特徴的なデザインを用いることで、Webサイトのブランディングができます。

ファビコンは小さなアイコンですが、ファビコンの設置は企業のイメージを伝えることには有効です。多くの企業では、すでに存在するロゴやデザインをファビコンに反映していることがあります。

ファビコンの設置方法とは？

ファビコンの設置方法は以下の通りです。

画像をICO形式に変換する

ファビコンに使用したい画像をICO形式に変換します。ICO形式に変換しておくことでサイズごとのファビコンを用意する必要がありません。

画像をICO形式に変換するにはツールの利用が便利です。
ツール上でファビコンをデザインできるものから、用意した画像の形式を変換するだけのものなど、ツールによって仕様が異なるため、必要に応じたツールを選びましょう。

Webサイトのルートディレクトリに画像を追加する

ICO形式に変換した画像のファイル名を「favicon.ico」に変更し、Webサイトのルートディレクトリに置いてください。すると、自動的にファビコンが認識され、各場所に応じたサイズのファビコンが表示されるようになります。

ただ、ルートディレクトリに任意で変更を加えられない場合は、以下の方法で設置しましょう。

HTML内に記述する方法もある

WebサイトはHTMLで構成されているため、HTMLのhead要素内にファビコンのリンクを設置することでファビコンを表示できます。しかし、Webサイト内にあるすべてのページそれぞれのHTMLに記述する必要があり、手間がかかるでしょう。

ファビコンのおすすめ作成ツール

ファビコンの画像を作成・変換する際に便利なツールを3つ紹介します。

@icon

@iconはWindowsのみ利用可能で、パソコン上にインストールする必要があります。画像形式は「BMP」「ICO」「PNG」「PSD」「EXE」「DLL」「ICL」の7種類に対応しており、「BMP」「ICO」「PNG」「ICL」の4形式で保存できます。

ツール上でのデザインは不可能なため、使いたい画像はあらかじめ用意しておきましょう。

Quick Any2Ico

Quick Any2IcoはWindowsのみ利用可能です。画像形式は「JPG」「PNG」「BMP」「GIF」「JPEG」「WMF」「EMF」「TIFF」「TIF」「ICO」の10種類に対応しています。アイコンサイズは16px × 16pxから512px × 512pxまでと幅広いサイズから選択可能です。

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

ファビコン favicon.icoを作ろう！はオンラインで利用するため、端末の種類に限らず無料で利用できます。また、日本語のWebサイトであるため、初心者でも利用しやすいのが特徴です。
ファビコン favicon.icoを作ろう！では、ファビコンに使いたい画像をアップロードし、サイズに合わせたボタンを選択するのみでファビコンを作成できます。

ファビコンで起こりやすいトラブルと対処法

ファビコンを設置する際、起こりやすいトラブルが2つあります。それぞれの内容とその対処法について以下で解説します。

ファビコンが表示されない

ファビコンを設置したはずなのに表示されない場合、いくつかの対処方法を試してみましょう。

• 画像ファイルがICO形式になっているかを確認
• ブラウザのキャッシュ（履歴）を削除
• Webサイトが絶対パスで構築されているかを確認

ファビコンの画像ファイルはPNGやJPGでも利用できますが、ICO形式でないと表示されないトラブルが起きるようです。そのため、ファビコンで利用している画像形式がICOであるかを確認してください。

ブラウザのキャッシュは履歴のようなもので、一度閲覧したWebサイトのデータが一時的に保存される仕組みです。ただ、過去のデータが保存されていることから、ファビコンを変更しても過去のデータをもとに表示されるため、新しいファビコンが表示されないというトラブルにつながります。
したがって、新しいファビコンが反映されない場合、一度ブラウザのキャッシュを削除しましょう。

絶対パスとは、Webサイト内でトップページを基準とし階層が深くなるごとに「/」で区切られる階層構造を指します。ファビコンの設置は絶対パスでないと表示されないことがあるため、表示させたいWebサイトが絶対パスであるかを確認してください。

ダークモードで画像が見えない

暗い色をメインにデザインしたファビコンは、ブラウザをダークモードで利用した場合「見えない」「見えにくい」というトラブルが起きます。
そのため、ダークモードで利用された場合でも見やすいよう、背景に色を加えたり明るい色でデザインしたりするなどの工夫が必要です。
また、ダークモードの場合の色を指定する設定もあるため、必要に応じて対処しましょう。

ファビコンを有効に活用しよう

ファビコンは小さいアイコンではありますが、Webサイトの信頼性を高め、リピーター獲得につながる重要な役割を持っています。設置にも複雑な作業はないため、Webサイトを作成する際はぜひファビコンを設置しましょう。

弊社「ferret」はBtoBマーケティングを総合的にサポート。マーケティングツールやコンサル・代行支援など、幅広いサービスの中から貴社に最適な解決策を柔軟にご提案します。

サイト・LP制作については、BtoB事業に適したサイトを要件定義から一貫して制作します。マーケティングにお困りごとがある方はぜひ資料をご覧ください。

>ferretサービス紹介資料のダウンロード【無料】はこちら