WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

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

2024.02.06 2022.09.01 Web制作
継続率90%、様々な広告媒体の運用を最適化したい方へ

あなたのサイトは、集客できていますか?各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。

Webサイト制作サービスを見る
このエントリーをはてなブックマークに追加

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

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

担当者・予算・リソース不足に応えるSEOツールIntimateSEO

ファビコンとは?

ファビコン(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効果により影響を与えるようになったと言えるでしょう。

2023年以降はPCの検索結果画面でも表示されるようになったファビコン

PCではブラウザのお気に入りやタブ上にのみ表示されていたファビコンですが、2023年2月頃から検索結果上のサイト情報にも表示されるようになり、より一層サイト情報が視覚的に認識しやすくなりました。
Webサイトの認知を高める意味でも、ファビコンの重要性はさらに高まると言えます。

ファビコンの作成方法

それでは次に、ファビコン(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)画像を作成したら、設置まで丁寧に行ないましょう。

作成したファビコンをサーバーにアップロードする

作成したファビコン画像をサーバーにアップロードしましょう。アップロードしたファビコンのURLパスをコピーしておきます。URLパスは、次の工程でhtmlコードに記述する際に必要です。

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”>

ファビコンに関するよくある質問

なぜファビコンが必要あるといいのですか?

ファビコンを表示させることで検索結果の画面上でサイトページを目立たせることができ、他サイトとの差別化を図ることができます。ユーザーの目を引くためにも有効な手段となります。

ファビコンの設置はSEO対策に有効ですか?

ファビコンの設置・未設置によって検索エンジンに影響を与えることはありません。ただし、ブラウザや検索結果、お気に入りバーでの視認性が上がるため、設置がおすすめです。SEOによる集客効果を見込むには全体的な施策が必要です。ファビコン以外のSEO対策は当社のSEOコンサルティングサービスをご覧ください。

ファビコンは設置していなくても大丈夫ですか?

ファビコンは絶対必要というわけではありませんが、会社のイメージを定着させたりユーザーからの信頼を得られるメリットがあるので、設置することをおすすめします。

ファビコンを変更することはできますか?

ファビコンを変更することは可能です。他社との差別化を図るためにもオリジナルのアイコンを設定すると良いでしょう。

ファビコンが表示されない場合はどうしたらいいですか?

ファビコンを設定しているのに表示されない場合は、キャッシュが残っていたり画像URLが間違っているなどの原因があります。一度設定を見直してみましょう。

成果の最大化を目指すWebサイト制作

Webサイト制作

Webサイト制作に関して以下のお悩みを持ったことはありませんか?

「Webサイト経由のお問い合わせ数を増やしたい・・・」

「SEOに強いWebサイト制作会社を探してる・・・」

以前、私がWebサイト制作を外注する時に「成果を最大化するアドバイスがもらえるのか」「SEO要件を満たした会社なのか」こうした会社を見つけることが出来ませんでした。

当社はWebサイト制作はもちろんのこと、「Webマーケティングによる収益の最大化」を目指す会社です。なぜなら、SEOに強くCV数を最大化を図るWebサイト制作を相談することができるからです。また、経験豊富な専任コンサルタントが社内のSEOコンサルタント制作チームと連携してWebマーケティングの収益最大化を目指すことができます。

当社の強みは以下にあります。

  • SEOを踏まえたサイト制作設計
  • 豊富なWordPress制作実績のほかオリジナルCMSの構築も得意
  • テスト検証に基づくユーザー目線のデザイン設計

当社にWebサイト制作をお任せ頂いたお客様で様々な成果事例が報告されています。

当社は「SEO×クリエイティブ」のちからで課題を解決できるWebサイト制作の代行会社です。当社の「Webサイト制作サービス」をご確認ください。

Webサイト制作の外注サービスを見る

おわりに

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

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

 

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

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
お役立ち資料ダウンロード
SNSでフォロー
問い合わせ数5倍 1,000社以上の実績
ウルロジ EC事業特化型 物流アウトソーシング
セルマーケ
SEO×デザインでどの時代でも集客に強いサイトを制作します

あなたのサイトは、集客できていますか?各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。


Contactお問い合わせ

Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。

関連資料ダウンロードはこちら
サービスのお問い合わせはこちら

Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中!

Webマーケティング最新情報をお届けするDMSメールマガジン
東京営業所
東京都武蔵野市御殿山1-1-3 クリスタルパークビル2F
電話番号 0422-77-1087 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2024 DM SOLUTIONS Co.,Ltd. All rights reserved.