Webサイトにおいて、ファビコンは「絶対必要！」というものではありません。
直接的に順位を向上させるわけではないですし、ファビコンがあったからといって、劇的に大きな好影響を及ぼすわけではありません。
ただし、検索結果におけるページの視認性を高め、サイトの認知度を上げることにはつながります。

というわけで今回は、あらためて「ファビコンとは何か」を押さえつつ、ファビコンの設定の仕方や、設定したはずなのに表示されないときの対処法についてまとめてみました。

ファビコンとは？

ファビコン(Favicon)は「Favorite Icon」の略で、教科書的にいうと「Webサイトのシンボルとなるアイコン」ということになります。
それをパッと見れば、どこのサイトであるかすぐわかるというマークですね。

たとえば「風俗 大阪」などで検索すると、風俗ポータルサイトや店舗ホームページのタイトルがずらーっと並びますが、その左側に表示されている小さなアイコンがファビコンです。
また、いずれかのページを開くと、ブラウザのタブの部分にもファビコンが表示されます。

そんなファビコンのメリットとしては、「サイトの認知度を高める」ということが挙げられます。
複数のWebページを開いて調べ物をするときなど、タブの部分にファビコンがあれば、瞬時にどのサイトがどこにあるか判別することができますよね。

また、

• デザインにこだわることでサイトのブランディングに役立つ
• きちんとファビコンを作り込んでいるサイトは信頼を得やすい

といった点もメリットとして挙げられます。

ファビコンの設定の仕方

ここでは、ファビコンの設定方法を簡単にまとめてみました。

①画像を作成する

すでに店舗のロゴなどがある場合は、そちらを流用してもOK。
ブラウザのタブ部分では正方形で表示されるので、正方形でデザインするのが基本となっています。
ただし、検索結果のページでは円形で表示されるので、円形に切り抜かれたときにロゴの見え方がおかしくならないようにデザインするのもポイントです。

②拡張子を変換する

ファビコンに適している拡張子は「.ico」なので(「.png」などは、ブラウザによって未対応の場合があります)、画像を作成後は「.ico」に変換しましょう。

favicon.cc
iconifier.net

といった変換サイトを使えば、無料で簡単に行うことができます。

③サーバーのルートディレクトリへアップロードする

①～②が完了し、ファイルができたらアップロードします。
「favicon.ico」というファイル名でルートディレクトリにアップロードすれば、自動的にファビコンとして表示されます。

④HTMLへの実装をする

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

こちらのコードをHTMLのヘッダー部分に実装することで、Google ChromeやFirefox、Safari、Edgeなどに問題なく表示することができます。

設定したファビコンが表示されない！？

上記の①～④までやって設定できたはずなのに、ファビコンが表示されない……。
そんなときは、次のポイントをチェックしましょう。

• ファイル形式はホントに「.ico」になっているか？
• ブラウザのキャッシュが残っている(溜まっている)のでは？
• Webサイトは絶対パスになっているか？

ファイル形式を今一度チェックし、ブラウザのキャッシュを削除し、Webサイトが絶対パスかどうか確認することで、正しく表示できる可能性があります。
しっかりファビコンを機能させるためにも、ぜひ押さえておきましょう。