【簡単3分】STUDIOでファビコンを設定する手順！

ファビコンは「クリック率の向上」や「ブランディングの強化」に繋がるので、必ず設定しておきたい項目です。

というのもファビコンを設定すれば、検索結果画面などに画像が表示されるようになるからです。

設定することによるデメリットはほとんどなく、基本的にメリットしかありません。

そこで今回は、STUDIOでファビコンを設定する手順、そして設定するコツやメリットについて詳しく説明します。

初心者でも3分で設定できる内容になっているため、ぜひこの機会にファビコンを設定していきましょう。

ファビコンの表示場所とは？

ファビコンを設定すれば、検索結果に画像が表示されるようになると説明しました。

ですが、ファビコンが表示される場所はそれだけではありません。

◼︎検索結果画面

GoogleやYahoo!で検索したときに、サイトタイトルやメタディスクリプションとあわせて、ファビコンが表示される仕様になっています。

◼︎ブックマーク一覧

お気に入りのサイトとしてブックマークされた時も、ファビコンを設定していれば左側に表示されるようになります。

◼︎ブラウザのアドレスバーやタブ

サイトタイトルと共にファビコンが表示される仕様になっています。

多くのタブが開かれている状態でも、目立つファビコンにしておくことで、自社サイトが埋もれない状態を作れます。

ファビコンは思っている以上に、ユーザーの目に留まります。他社サイトに埋もれないように、必ず設定しておくようにしましょう。

STUDIOでファビコンを設定する手順

STUDIOでファビコンを設定する手順は、下記のとおりです。

それぞれ具体的に説明します。

手順①：正方形の画像を用意する

ファビコンは正方形の画像を使用するので、下記サイズあたりの画像を用意しましょう。

たまに「16×16ピクセル」や「32×32ピクセル」が推奨といった情報を目にしますが、基本的には48×48ピクセル以上がおすすめです。48×48ピクセル以上がおすすめな理由については、「ファビコンを設定する際のコツ2選」で詳しく説明しています。

当メディアでは、下記のようなファビコンを採用しています。

ブラウザ上では小さく表示されるので、「シンプル&わかりやすいカラー」が重要になってきます。サイトの看板になるアイコンなので、しっかり吟味して作成するようにしましょう。

手順②：ファビコンを設定したいプロジェクトを開く

ファビコンはサイトごとに設定する必要がありますので、設定したいプロジェクトを開きましょう。

手順③：ファビコンを設定する

画面左下にあるメニューの「ページ」マークをクリックします。

サイトタイトルの横にあるマークをクリックします。

ファビコン部分をクリックして、用意していた正方形の画像（ファビコン）を選択します。

もし1~2週間経ってもファビコンが表示されない場合は、「.ico」形式の画像以外を設定しているかもしれません。「.png」や「.jpg」などの形式になっていないか確認するようにしましょう。

ファビコンを設定する際のコツ2選

次に、ファビコンを設定する際のコツ2選について紹介します。

それぞれ具体的に説明します。

フォーマットは「.ico」が推奨されている

画像には「.png」や「.jpg」など多くの拡張子がありますが、ファビコンに設定する画像は「.ico」形式のものを使いましょう。

なぜなら互換性の観点で優れており、どのブラウザでも問題なく表示される可能性が高いからです。

PNGやSVGなどの形式だと、古いバージョンのブラウザでは正しく表示されない可能性が高くなってしまいます。

「せっかくファビコンを設定したのに、検索結果に表示されない」となると、再度設定する手間もかかります。

なので、ファビコンを設定するときは必ず「.ico」形式の画像を使うようにしましょう。

サイズは48×48ピクセル以上が推奨されている

ファビコンは基本的に48×48ピクセル以上の大きさで作るようにしましょう。

Googleが定義するファビコンのガイドラインでは、下記のように書かれています。

ファビコンは正方形（アスペクト比 1:1）で、8×8 ピクセル以上のサイズが必要です。最小サイズは 8×8 ピクセルですが、さまざまな場所で適切に表示されるように、48×48 ピクセルより大きなファビコンを使用することをおすすめします。有効なファビコン形式であれば、すべてサポートされます。

引用元：検索結果に表示されるファビコンを定義する

なぜなら現代では高解像度ディスプレイ（Retinaディスプレイや4Kモニターなど）が主流になってきているからです。

将来的なデバイスの進化なども踏まえた上で、ファビコンは48×48ピクセル以上で作るようにしましょう。

ちなみにファビコンは専門のオンラインツール「Favicon.io」やデザインソフト「Adobe Photoshop」や「Canva」で作るのが一般的です。

ファビコンを設定するメリット2選

ファビコンを設定するメリットは、下記の2つになります。

それぞれ具体的に説明します。

ブランディングを強化できる

ファビコンを設定するメリット1つ目は、ブランディングを強化できることです。

なぜなら人間は何度も繰り返し接触することで、好感度や評価が高まってくるという心理効果があるからです。

例えば、マクドナルドはCMで全世界共通のキャッチフレーズ「I’m Lovin’ It」を何度も繰り返し、フレーズとロゴを同時に見せることで、親近感などを醸成しました。

ファビコンも同様です。何度も同じファビコンを目にすることで、「このサイトは信頼できる」とユーザー側が感じるようになります。するとブランド価値の向上に繋がり、集客がグンと楽になります。

クリック率が上がりやすくなる

ファビコンを設定するメリット2つ目は、クリック率が上がりやすくなることです。

なぜなら過去に閲覧してくれたユーザーがファビコンを覚えていて、かつユーザーが良い体験をしていた場合、自社サイトを再度クリックしてくれやすいからです。

そしてクリック率が上がれば、SEO観点でもプラス評価になりますので、自社サイトの検索順位が上がることにもつながっていきます。

ですが逆にファビコンを設定していなければ、ユーザーはファビコンでサイトを区別することができないので、クリック率の向上はまったく期待できません。つまりSEO観点でのプラス評価にも繋がりません。

ファビコンは疎かにされがちですが、間接的にSEOに好影響を与えたりなど、ひそかに影響力を持っていることも確かです。ファビコンの設定自体は簡単なので、必ず面倒くさがらずにやっておきましょう！

STUDIOのサイト制作は「Terace」にお任せ！