ファビコンとは？設定方法や役割と作成するメリットをご紹介

ファビコンとは、Web画面のタブなどに小さく表示されるアイコンのことです。Webサイトを閲覧したことのある方なら、誰しも目にしたことがあるのではないでしょうか。ファビコンを設定すると、ユーザーはもちろんWebサイトを運営する上でもさまざまな利点があります。

本記事では、ファビコンの役割や設定するメリット、作成方法などを詳しくご紹介するので、ぜひWebサイト構築のヒントにしてください。

ファビコンとは

ファビコンとは、「favorite icon（お気に入りのアイコン）」の略称で、Webサイトのシンボルマークとなるアイコンを指します。

ファビコンが表示される主な場所は次のとおりです。

• 検索結果ページで表示されるタイトルの左側
• Webページ上部のアドレスバーやタブ
• Webページをショートカット設定した際に表示されるアイコン
• ホーム画面のブックマークやお気に入り

ファビコンは、閲覧者が複数のWebページを開いている際や、お気に入りなどに登録したサイトを探すときの目印となります。サイトをイメージ付ける重要な役割もあるため、忘れず設定しましょう。

ファビコンのメリット

ファビコンを設定すると、ユーザーがWebサイトを認識しやすくなる他、ブランディングができてリピーター獲得にもつながります。具体的にどのようなメリットが期待できるのか詳しく見ていきましょう。

Webサイトの認知度向上

ファビコンを設定すると、Webサイトの認知度向上が期待できます。

先述したように、ファビコンは複数のWebページを開いているときのタブやショートカット、お気に入りなどに表示されるアイコンです。色や形で分かりやすく表示されるため、閲覧者がWebサイトを探すときの目印になります。

ファビコン自体は小さく表示されるものの、閲覧者にWebサイトを印象付けることが可能です。

Webサイトのブランディング

ファビコンは、Webサイトのブランディング効果を高めるメリットもあります。

閲覧者はWebサイトを開く際にファビコンを目にするため、他のWebサイトとの違いを把握しやすくなります。ファビコンを設定するとWebサイト独自の世界観を生むことができ、他との差別化にも役立つでしょう。

このように、独自のデザインを用いたファビコンは、Webサイトを訪れるユーザーに企業やブランドのイメージを伝えることができます。

リピーター獲得

ファビコンの設定は、Webサイトのリピーター獲得も期待できます。ユーザーにとってファビコンは、Webサイトを信頼できるかどうかの判断材料の一つとなるからです。

ネット上には無数のWebサイトがあるため、ユーザーはどの情報が正しいか迷うことも少なくありません。そんな中で、ファビコンが設定されているWebサイトは、細かいところまで丁寧に構築している印象をユーザーに与えられ、安心感を抱いてもらいやすくなります。

また利用しようと思うきっかけにもなり、Webページを閲覧する際に同じファビコンを目にすることで親近感を持ちやすくなります。その結果、ユーザーのリピート率向上につなげられるでしょう。

ファビコンの設定方法4STEP

ファビコンの設定方法は、画像作成、拡張子の変換、サーバーへのアップロード、HTMLへの実装という4つのSTEPで進めます。それぞれの詳しい設定方法と、ファビコンが表示されない場合の対処方法を見ていきましょう。

1.画像作成

初めに、ファビコンに設定する画像を作成しましょう。Webサイト専用の画像を新規で作成する方法、自社の企業やブランドで使用している既存のロゴを流用する方法のどちらでも構いません。既存のロゴを使用すれば、新しいデザインを考える手間を省けます。なお、ファビコンは正方形で表示されるため、新しくデザインする際は正方形で作成しましょう。

ファビコンのサイズは、タブに表示される「16px×16px」の他にも複数のサイズがあります。表示する場所によって使用サイズが異なるため、作成したファビコンはico形式に変換しておきましょう。画像作成時は最大サイズのpngで作成し、ico形式に変換しておけば、サイズごとのファビコンを用意せずに済みます。

2.拡張子の変換

ファビコンに適したico形式に拡張子を変換するには、変換サイトを使用するのがおすすめです。

以下に、拡張子に使える変換サイトを2つご紹介します。

• favicon.cc

無料で利用できる海外の変換サイトです。Web上で使えるため、会員登録やソフトのダウンロードなどをせずに使えます。ページ内に設置された枠内でファビコンを作成でき、カラーも細かく選択可能です。他人が作成したファビコンも確認できるため、作成する際には参考にしてみてください。

• iconifier.net

こちらも無料で使える海外の変換サイトです。ただし、ファビコンの作成はできないため、事前にpngの画像を用意しておく必要があります。用意した画像をアップロードすれば、多様なサイズのファビコン作成が可能です。zipファイルにまとめてダウンロードもできます。

3.サーバーのルートディレクトリにアップロード

ico形式のファイルが完成したら、Webサイトのサーバー上のルートディレクトリにアップロードしましょう。「favicon.ico」のファイル名でWebサイトのルートディレクトリにアップロードすることで、ファビコンとして自動的に認識され適切に表示されます。

使用するブラウザによっては、上記の方法でファビコンを表示できない場合があります。その際は、次の項目でご紹介するHTMLに実装する方法で対処可能です。

4.HTMLへの実装

ファビコンを表示するブラウザが「Chrome」「IE11」「Firefox」「Safari」「Opera」「Edge」の場合は、以下のコードをHTMLのヘッダー部分に実装します。

<link rel=”icon” href=“/image/favicon.ico”>

「IE11」の場合は、pngやgif形式も使用可能です。

<link rel=”icon” type=”image/png” href=“/image/favicon.png”>

<link rel=”icon” type=”image/gif” href=“/image/favicon.gif”>

ファビコンが表示されない場合の対処法

ファビコンを設定したのに表示されない状態になった場合は、以下の対処方法を試してみましょう。

• ファイルがico形式になっているか確認する
• ブラウザのキャッシュを削除する
• Webサイトが絶対パスになっているか確認する

ファビコンのファイルは、ico形式でないとうまく表示されないケースがあります。まずは設定したファビコンがico形式になっているか確認してみましょう。

ブラウザのキャッシュが溜まっていると、新しいファビコンを設定しても過去のデータが残っていて表示されない場合があります。ブラウザのキャッシュを削除して新しいファビコンが反映されるか試してみてください。

ファビコンは絶対パスでないと表示されないことがあるため、Webサイトが絶対パスかどうかも確認してみましょう。

ファビコンの設定なら、ジオコードへ！

ファビコンは、Webサイトを印象付ける役割を持つシンボルマークです。検索結果画面のタイトルの左側やタブ、ショートカットなどに表示されるアイコンで、ユーザーがWebサイトを見つける目印になります。ファビコンを設定することでユーザーに良い印象を与えることができ、認知度の向上やブランディング効果、リピート獲得などのメリットが期待できます。

ファビコンの作成は本記事でご紹介した4つのSTEPで進めていきますが、いざ作るとなるとうまくいかないこともあるでしょう。
自社でファビコンを作成するのが難しい場合は、ぜひSEOに熟知したジオコードにご依頼ください。ジオコードではSEOコンサルティングも行っています。Webサイト構築に関するお悩みがあれば、お気軽にご相談ください。