ファビコンとはWebサイトのシンボルであり、一目で印象が伝わりブランディングの効果をもつアイコン画像です。
ブラウザのタブやスマホのショートカットアイコンといった場所で目にしたことがあるのではないでしょうか。
しかしファビコンの効果がよくわからず、なんとなく設定しているという声もよく耳にします。
そこでこの記事では、ファビコンのメリットや作り方のコツ、設置の仕方や簡単に変換できる無料ツールをご紹介します。
最後までご覧いただき、ファビコンについての知識を深めてください！
ブラウザでお気に入りに登録した際や、ブラウザのタブに小さなアイコンが表示されますよね。 その小さな画像をファビコンといいます。
ファビコンとは、Webサイトの差別化やブランディングの働きをするアイコン画像です。
パソコンブラウザではファビコンは小さく表示されるため、直感的に印象を伝えられる画像で作成しましょう。
Googleの検索結果に、ファビコン+サイトURLが表示されているのをご存知ですか？
※2021年1月現在、パソコンでの検索結果にはファビコンが表示されていません。
ファビコンの設定をしていないサイトには、代わりにデフォルトの地球儀のアイコンが表示されています。
つまり独自のファビコンを設定していれば、より自分のサイトを発見してもらいやすくなり、検索結果の画面での差別化が可能です。
その結果、クリック率にも好影響を与えられます。
Webサイトと関連するカラーや画像を使用し、ファビコンを見ればWebサイトと紐付けてもらえるイメージが理想的です。
ファビコンを見て「このサイトは知っているところだから安心だ」と感じもらえればクリックされる率が上がり、リピーター獲得にも役立ちます。
ファビコンが表示される箇所は主に以下のようになっています。
【パソコンの場合】
【スマホの場合】
パソコンのブラウザではとても小さく表示されるため、遠くから見ても判別できるファビコンが効果的です。
一方スマホでのショートカットアイコンは、丁寧に作成されたアプリアイコンと並び、比較的大きく表示されます。
iPhoneをはじめとする昨今のスマホは画面解像度が高く、劣化したファビコン画像ではかえってWebサイトにマイナスのイメージを与えかねません。
好印象を与えられるようにファビコンを作成しましょう。
Googleの検索結果に表示されるファビコンについて、Search Console ヘルプに記事が掲載されています。
検索結果の表示で視覚的にアピールするため、ガイドラインを理解して設定しましょう。
ガイドラインの内容は以下のようになっています。
- Google がファビコンのファイルとホームページをクロールできること（Google を ブロック しないこと）。
- ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
- ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。 有効なファビコン形式 は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
- ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
- わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
引用元：➡️ Define a favicon to show in search results | Google 検索セントラル
ガイドラインに沿って設定していても、検索画面に必ず表示される保証はないためご注意ください。
【ファビコン作成の3ステップ】
以上でファビコンの作成完了です。 無料でico形式に変換できるツールをのちほどご紹介します。
ファビコンは通常の画像ではなく、『ico』という独自のフォーマットの画像になります。 『ico』は複数の画像サイズを一度に格納する独自の画像形式であり、その中から表示場所に応じて適切なサイズのファビコンを表示します。 パソコンブラウザからスマホアイコンまで、多種多様なデバイスに対応する便利な形式です。
ico以外のPNGやJPG、SVGといった画像形式でもファビコンとして設定できます。 しかし対応していないブラウザもあるため、共通で利用できるico形式と、スマホでのショートカットアイコン用にPNG形式を用意するのがおすすめです。
➡️各ブラウザに有効な画像形式についてはこちら Favicon - Wikipedia
ファビコンはデバイスによって必要なサイズが異なります。 そこで、ほしいサイズを複数格納できるico形式にて、以下のような代表的なサイズを作成しておくのがおすすめです。
必要なサイズが存在しない場合は格納されている最大サイズが表示されるようになっています。 180×180と192×192はスマホでのショートカットアイコンとして利用するため、PNG形式で準備しましょう。
ファビコンは小さく表示される場所が多く、複雑なデザインは避けて色数を抑えることをおすすめします。
淡い色は判別しにくいため、鮮やかなはっきりとした色を利用しましょう。
とはいえ、目がチカチカするような配色は逆効果になってしまいますので注意が必要です。
遠目で見てもなにが表現されているか理解しやすく、Webサイトやサービスとイメージが合致するシンプルなデザインが理想的です。
ファビコン画像ができれば、次にWebサイトに表示するための設定をします。
HTMLベースのサイトの場合とWordPressのようなCMSでは設定方法が異なりますので、それぞれご紹介します。
まず画像ファイルを適切なフォルダに入れてください。
そしてHTMLのheaderに、以下のようなファビコン設定のコードを記述します。
<link rel=“shortcut icon” href=“画像ファイルのパス/favicon.ico”>
<link rel=“apple-touch-icon” href=“画像ファイルのパス/apple-touch-icon.png”>
<link rel=“icon” type=“image/png” href=“画像ファイルのパス/android-256x256.png”>
画像パスは絶対パス・相対パスのどちらでも構いません。
ブラウザの対応状況の変化に伴い、記述方法は変化する可能性があります。
当記事は2021年1月時点で有効なコードを掲載しているため、現在の状況に沿っているかご確認の上ご利用ください。
WordPressでのファビコン設定はとてもシンプルです。
管理画面の左メニュー『外観』>『カスタマイズ』＞『サイト基本情報』の中の『サイトアイコン』から設定します。
設定をクリックすればメディアライブラリが開きますので、ライブラリの中の画像や新たにアップロードした画像を選択するだけで設定完了です。
WordPressでファビコンを設定する場合、画像を選択時に『画像切り抜き』の機能が使えるため正方形ではない画像でも利用できます。
背景透過しているPNG形式の場合、背景が黒になってしまうため注意が必要です。
黒い線や文字が入った画像を使う際には、あらかじめコントラストのはっきりした色の背景をつけて画像を作りましょう。
無料で利用できる、ico形式に変換してくれるおすすめのツールを2つご紹介します。
JPEGやPNG、GIFの画像をブラウザ上でアップロードするだけでico形式に変換してくれるサービスです。
作成したいサイズにチェックを入れることで、複数サイズが格納されます。
シンプルでわかかりやすく使いやすい画面のため、とても使いやすいシンプルなサイトです。
ブラウザ上で素早く各種サイズのファビコン画像とコードがセットで用意できる、おすすめのサービスです。
ico画像だけでなく、iPhoneやAndroidで必要なサイズのPNG画像、HTMLに記述するコードも書き出してくれます。
アップロードする画像のデータサイズは500KBまでの制限がありますので、もしデータサイズが大きい場合はあらかじめ縮小してからアップロードしてください。
＼一流デザイナーのスキルが身に付く／
ファビコンは小さくとも存在感の大きな、Webサイトのシンボルとなるアイコン画像です。
すでにファビコンを設定されている方も、役目を果たしているか見直してみてください。
もしあなたのWebサイトでまだファビコンの設定ができていない場合は、いますぐ設定してみませんか？
極力シンプルで目立ちやすく、Webサイトやサービスのイメージと合致する効果的なファビコンを設定しましょう！
