2019.10.28Web制作

ファビコン(favicon)とは?作成方法と設定方法について

  • このエントリーをはてなブックマークに追加

ファビコン(favicon)とは、Webブラウザで新規タブを開いたときにタブに表示される画像またはWebページをブックマークした際に表示される画像などをいいます。

2019年5月には、Googleの仕様が変わり、ユーザーの検索結果画面にも表示されるようになりました。そんなファビコン(favicon)の概要や表示される場所・作成方法・作成ツール・設定の方法などを解説いたします。

ファビコンとは?

ファビコン(favicon)とは、「Favorite icon(お気に入りのアイコン)」が派生したIT・Webマーケティング用語で、internetExplore5から追加された機能です。インターネットに接続し、Googleなどのブラウザを開いた際にブラウザのタブに表示されます。

そのほかにも、スマートフォンでWebページを使用ブラウザの「お気に入り」や「ホーム画面」に設定したときにも表示されます。ブラウザを開いたときにタブに表示されるファビコン(favicon)は以下の画像です。

ブラウザを開いたときにタブに表示されるファビコンの例

上記画像の赤枠内のように、指定Webページやサイトを正方形の画像で表すのがファビコン(favicon)です。ファビコン(favicon)は設定しなくても、Webページやサービスを公開することはできますが、一般的には多くのWebページで設定がされています。

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

それでは、改めてファビコン(favicon)が表示される場所についてご説明します。いくつかの場所に表示されますので、確認して起きましょう。

Webブラウザでページを開いた際にアドレスバーやタブ部分に表示される

もっともファビコン(favicon)を目にする機会が多いのが、「Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されるファビコン(favicon)」でしょう。後ほどご説明しますが、ファビコン(favicon)は、下記のように表示させる方法がいくつかあります。

  • .ico形式で設定する
  • .ico形式以外の方法で設定する
  • Windows用アイコンで設定する

検索ブラウザが異なると個別に設定をしなければならないケースがありますが、いずれも同じくタブを開いた際のアドレスバーやタブ部分に設定したファビコン(favicon)が表示されます。

ブックマークした際に表示される

ファビコン(favicon)は、Webページをブックマークしたときにも「ブックマーク一覧」に表示されます。ブックマークとは、ユーザーが指定のWebページを今後何度もチェックすることや、いわゆる「お気に入り」として保管・整理しておきたいときに行なう作業です。

Webページのアイコン画像となるファビコン(favicon)は、ユーザーの「ブックマーク一覧」に表示されますので、一目でユーザーの目につきやすい画像を設定することで、PV(ページビュー)数の増加に好影響を与えることと思います。

スマホでグーグルの検索エンジンを利用した際に検索結果に表示される

新しくファビコン(favicon)が表示されるようになったのが、スマートフォンでGoogleの検索エンジンを使用した際に検索結果に表示されるようになったことです。英語版ではありますが、Googleの公式ブログ記事「A new look for Google Search」にて、2019年5月22日に発表されています。

ファビコンがスマートフォンで表示される場所

これまでは、スマートフォンでGoogleを使い情報を検索した際には、「ページのタイトル」「URL(パンくずリスト)」「メタディスクリプション」のみが表示されていました。

しかし、新しい表示機能では、一番上に「ファビコン(favicon)+ URL(パンくずリスト)」「ページのタイトル」「スニペット」という表示順に変更となったのです。パンくずリストが設定されていないWebページもしくはTOPページの場合は、URLが表示されます。

なお、日本語以外のWebページ表示の場合は、URLの箇所はサイト名がパンくずリストの先頭に表示されていますが、日本語のWebページ表示の場合は、URLそのものがパンくずリストの先頭に表示されます。

新しい検索結果へのファビコン(favicon)表示を受けて、ファビコン(favicon)画像がPV(ページビュー)数などのSEO効果により影響を与えるようになったと言えるでしょう。

ファビコンの作成方法

それでは次に、ファビコン(favicon)を実際に作成する方法について解説していきたいと思います。一般的な作成の流れを抑えて、Webページ・サイト運営にファビコン(favicon)を取り入れてみましょう。

ファビコン(favicon)は .ico形式のファイルで作成する

ファビコン(favicon)は一般的には「16px × 16px」のサイズで使用されることが多いですが、表示される場所によっては「32px × 32px」や「24px × 24px」で使用されることもあります。

そのため、複数サイズの画像をひとつのファイルにまとめることができる「.ico形式」に変換し使用するべきでしょう。「.ico形式」の画像ファイルを使用することで、HTMLに記述する際に設定の手間が省けます。

簡単に作成できるツールを使う

ファビコン(favicon)はPhotoshopなどのツールでイチから作らなくても簡単に作成することのできるツールがいくつもあります。おすすめのツールは後ほどご紹介しますが、便利なツールを使うのがよいでしょう。

先ほどもご説明したように、ファビコン(favicon)はGoogleの新しい仕様によって、検索結果画面の先頭に表示され、SEO流入にも大きな影響を与えることが予想されます。

そのため、「Webページ全体のイメージと統一性がある」「可視性の高いシンプルなデザインにする」「なるべく目を引くような色合いにする」など、情報を検索するユーザー視点に立ったファビコン(favicon)作成が必要でしょう。

作成前に押さえておきたいGoogleガイドラインの内容

ファビコン(favicon)を作成するにあたり、Googleがガイドラインを発表しています。Googleのガイドラインを守って作成を進めていけるように、ここで内容を確認しておきましょう。

Googleが提唱するファビコン(favicon)作成のガイドラインとは?

Googleが提唱するファビコン(favicon)作成のガイドラインにつきましては、Search Console ヘルプに掲載されている「検索結果に表示されるファビコンを定義する」を参考にしています。これは、2019年5月に変わった検索結果の表示に対してのガイドラインです。その内容については以下となります(本文引用)。

  • Google がファビコンのファイルとホームページをクロールできること(Google をブロックしないこと)。
  • ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
  • ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
  • ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。
  • わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

引用元:Search Console ヘルプページ

なお、上記ガイドラインを全て満たしていても、確実にファビコン(favicon)がGoogleの検索結果画面に表示されるとは限らないとのことです。

ファビコンを簡単に作成できる無料ツール

それでは次に、ファビコン(favicon)を簡単に作成することができるツールについていくつかご紹介していきます。記事で紹介するツール以外にも、便利なツールはありますので、ぜひご自身でも調べてみてください。

favicon.cc

favicon.cc
引用元:favicon.cc

「favicon.cc」は海外のファビコン(favicon)作成ツールです。使用には会員登録やツールのダウンロードが必要ないため、すぐに手軽に使うことができます。

ファビコン(favicon)の作成には、使用するカラーを選択し、ページ中央にある枠内で作成を行ないます。ツールはソフトをダウンロードする必要なく、Web上で使うことができるので、スピーディーに制作をしたい方におすすめです。

Favicon generator

Favicon generator
引用元:Favicon generator

「Favicon generator」も海外のファビコン(favicon)作成ツールです。このツールも先ほどと同じく、会員登録やソフトをダウンロードする必要なく、使用することができます。Web上で簡単に使いはじめることができるので、とても便利です。ページ中央の枠内でファビコン(favicon )を直感的に作成できるので、デザインの初心者にも易しいでしょう。

iconifier.net

iconifier.net
引用元:iconifier.net

「iconifier.net」も海外のファビコン(favicon)作成ツールです。こちらのツールでは、事前にPNG形式の画像(ファビコンのもととなる画像)を用意しておく必要があります。

PNG形式の画像が用意できたら、「iconifier.net」上にアップロードすることで、手軽に「16px × 16px」から「512px × 512px」の多様なサイズのファビコン(favicon)を作成することができます。そして、作成した複数のサイズを選択し、zipファイルにまとめてダウンロードすることも可能です。

ファビコンの設置方法

では、最後に作成したファビコン(favicon)を新規タブやGoogleの検索結果画面に表示させるまでの設置方法を解説したいと思います。ファビコン(favicon)画像を作成したら、設置まで丁寧に行ないましょう。

HTMLのヘッダー内に指定のコードを記述する

ファビコン(favicon)画像を作成したら、指定WebページのHTMLファイルのヘッダー部分に記述していきます。なお、ファビコン(favicon)を表示させるブラウザによって、HTMLの記述方法が異なりますので、注意してください。

まず、表示ブラウザが「Chrome・IE11・Firefox・Safari・Opera・Edge」の場合、以下のコードをHTMLのヘッダー部分に記述します。

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

上記ブラウザでは、ファビコン(favicon)画像の参照元ファイルを「.ico形式」にします。なお、IE11に限っては、PNG形式やGIF形式をファビコン(favicon)画像に用いることもできます。

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

次に表示ブラウザが「IE9」の場合は、以下のコードをHTMLのヘッダー部分に記述します。

・<link rel=”icon” type=”image/vnd.microsoft.icon” href=“/image/favicon.ico”>

IE11と違って、「type属性」を記述する必要がある点が注意点です。

最後に表示ブラウザが「IE8以下」の場合は、以下のコードをHTMLのヘッダー部分に記述します。

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

おわりに

ファビコン(favicon)画像は、かつてはブラウザで新規タブを開いたときにタブに表示される画像・ブックマークした際に表示される画像という印象でしたが、2019年5月のGoogleの仕様変更によって、検索結果画面にも目立って表示されるようになりました。

Webページ・サイトを公開したら、ファビコン(favicon)を設定するのは、いまやWebの基本的なお作法です。ユーザーの目をひく可視性の高いファビコン(favicon)を設定することで、SEO効果への寄与も期待できますので、ぜひ設定してください。

 

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。