マーケティングコラム

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

ファビコンをご存知でしょうか?ファビコンとはWebブラウザのタブや検索結果画面のURL横などに表示されるアイコンのことを指します。
今回の記事ではファビコンの概要や設定方法について解説していきます。

皆さんはFavicon(ファビコン)をご存知でしょうか?
ファビコンとはWebブラウザを開いた際に画面上部のタブに表示される画像などを指します。

2019年5月以降はGoogleの仕様変更により、検索結果の画面にもそれぞれのwebサイトのファビコンが表示されるようになりました。
今回の記事ではFavicon(ファビコン)について、設定方法や作成方法について解説していきます。

ファビコンとは

Favicon(ファビコン)は「Favorite icon(お気に入りのアイコン)」から創られたIT用語です。
Internet Explorer5から追加された機能で、Web上で検索ブラウザでサイトを表示した際にタブに表示される画像のことをファビコンと言います。

現在では、スマートフォンなどでWebページをブックマークとして保存した際にも表示されるようになっています。
実際に表示されるファビコンは以下のようになります。

上記画像のように、Webページやサイトを正方形の小さい画像で表すのがFavicon(ファビコン)の役目です。
ファビコンは設定せずともWebサイトは正常に動作しますが、他のサイトと差別化やユーザーの記憶に留まるようにするため、現在では多くのサイトが設定しています。

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

ファビコンとはどのようなものか知っていただけたかと思いますので、続いてはファビコンが実際に表示される場所を詳しくご紹介していきます。

Webブラウザでページを開くとタブに表示される

恐らくパソコンを利用されている方は一番多く目にする機会があるのがこちらかと思います。
現在ではスマートフォンのタブにもファビコンが対応し表示されています。

見る側には問題はないのですが、設置する側は検索ブラウザ(Chrome,Internet Explorer,FireFoxなど)ごとに、個別で設定が必要な場合もありますので、注意が必要となります。

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

ファビコンはページをブックマークした際にも表示されます。ブックマークはユーザーがページを何度も見るからすぐに見れるようにしたいと、お気に入り登録しておくようなものとなっています。
ブックマーク一覧に表示された際にも、ファビコンを設定しておくことでユーザーは他のサイトと違いがわかり、他のサイトとの差別化や、覚えてもらえる要因の一つとしてファビコンが役立ちます。

スマートフォンで検索エンジンを利用して検索した際の検索結果画面に表示される

最近になってファビコンが表示されるようになった、スマートフォンでの検索結果画面。
2019年5月22日に発表されていました。

スマートフォンでは、検索結果画面の各サイトのURLの横にファビコンが表示されるようになりました。
これにより、よりユーザーからファビコンを見られることも増えたため、設定しておく重要性が高まったといえます。

ファビコンの作成方法

ここまででファビコンがどのようなもので、どこに表示されるかがわかっていただけたかと思いますので、続いてはファビコンの作成方法をいくつかご紹介していきます。

ファビコンは.icoで作成する

.icoとはその名の通り、アイコン(icon)の画像データに用いられるファイルの拡張子になります。
基本的には32×32ドットで構成されるビットマップ形式の画像データです。
こちらのファイルの作成方法は後ほど説明いたします。

Googleのガイドライン従う

ファビコンを作成、設置するにあたりGoogleがガイドラインを発表しています。
そちらを遵守して作成することで、おおよそ他の検索ブラウザでも表示が可能かと思いますので、ガイドラインの内容を簡単にご紹介していきます。

  • ・クローラーがファビコンとファイルをクロールできるようにすること
  • ・ファビコンがサイトのブランドを視覚的に表しており、検索結果を見た際に一目で見分けられるようになっていること
  • ・ファビコンのサイズは48の倍数のピクセルで構成されていること(48×48,96×96など)
  • ・Googleでは16×16で自動で変換され表示するため、正しく表示されるか確認すること
  • ・わいせつな表現やヘイト表現に関連するものなど不適切と判断されたファビコンは表示されません。自動的にデフォルトのものに入れ替えて表示されます。

ファビコンに設定する画像を作成する

ガイドラインについても知っていただけたかと思いますので、続いてはファビコンの作成方法をご紹介していきます。

上記ガイドラインにも記してあるように「Webページ全体のイメージや統一感があること」「視覚的にわかりやすくシンプルなもの」「目を引いて覚えやすいデザイン」であることが好ましいです。

Photoshopなどで作成することもできますが、簡単に作成できるツールもありますのでそちらを次のセクションでご紹介していきます。

作成に便利なツールの紹介

Photoshopなどのツールも使えないことや、素早く簡単に作成したいという方に向けて簡単に作成できるツールをご紹介します。

favicon.cc

こちらは海外のファビコン作成ツールになりますが、筆者は一番使いやすいと思っております。
会員登録やソフトのダウンロードなどが必要ないためすぐに使用することが可能です。

こちらのサイトでファビコンを作成するには色を選択して、ページにあるカンバスに色を塗っていくだけです。
ピクセルごとに色を塗ることができるため、スピーディーに作成が可能です。
こちらのサイトのファビコンはユーザーが作成したものがリアルタイムで表示されるため、実際に設置した際にどのようになるかが見てわかります。

ファビコンの設定方法

ファビコンの準備ができたらいよいよ実装です。実装の方法についてこちらで簡単に解説いたします。

HTMLを編集する

指定のWebページのHTMLもしくはPHPファイルのヘッダー部分に記述する必要があります。
ファビコンは表示させるブラウザにより記述する構文が異なります。

基本的なブラウザ(Chrome,IE11,FireFox,Safari,Opera,Edge)の場合には以下のコードをヘッダ部分に記述してください。
これはサイト内のimageというフォルダ内にfavicon.icoというファイルが格納されていると表示されますので、ファイルの格納場所にも注意が必要です。

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

基本的には上記のコードで表示は可能かと思いますが、IE11の場合にはpngやgifも表示することが可能です。
pngやgifを設定する場合には以下のコードをお使いください。

<link rel="icon" type="image/png" href="/image/favicon.png">
<link rel="icon" type="image/gif" href="/image/favicon.gif">

ファビコンの設定方法 | まとめ

ファビコンとは、ブラウザのタブ部分に表示される画像です。現在ではスマートフォンで検索した際の検索結果画面にも表示されます。

現在ではファビコンを設定しているサイトがほとんどですので、Webサイトやページを作成した際には設置することをお忘れなく。
簡単かつユーザーの記憶に残るファビコンを作成するのが良いです。作成する際にはガイドラインを遵守して作成してください。

Webサイト制作等でお困りの方は是非弊社にお任せください。
下記ボタンからお気兼ねなくご相談ください。

お問い合わせはコチラから

 

この記事を書いた人

Web集客相談フォームはこちら!

当ブログの運営をしている株式会社メディアエクシードは、少数精鋭のWebマーケティング会社です。
一言でいえば、少数だからこその強みを生かした「痒いところに手が届く会社」です。

王道のWebマーケティングだけではなく、弊社が自社プロダクトの集客のために、独自で編み出したマーケティング手法を持っており、
そのノウハウの中からクライアント様の業態に合った最適な集客プランをご提案させていただいております。

もし、「現状のWeb施策が成約に繋がっていない、Webで効率的に新規開拓をしたい!」とお考えでしたら、お気軽にご相談ください。

お問い合わせのサービス必須 貴社名 ご担当者名必須 ご担当者名(ふりがな)必須 電話番号 メールアドレス必須 集客に利用されたいホームページのURL 検索キーワードをお知らせください お問い合わせの詳細必須

個人情報に関する同意について

上記を確認の上、ご同意いただける方は
下記の「同意」ボタンを押してください。

必須
最短2分でお見積り!あなたの会社のHPはいくらで作れる?

関連記事

最短2分でサイト制作のお見積り!HP制作シミュレーター

1

9

Q:既存のホームページはございますか?

Q:「はい」を選んだ方|ホームページのURLを入力してください

次へ進む

最短2分でサイト制作のお見積り!HP制作シミュレーター

2

9

Q:ホームページの用途は何ですか?

次へ進む 戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

3

9

Q:制作するホームページのジャンルは何ですか?

次へ進む 戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

4

9

Q:ホームページのページ数はおよそ何ページになりますか?

次へ進む 戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

5

9

Q:ブログや最新情報などを更新する機能(CMS)は必要ですか?

次へ進む 戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

6

9

Q:いつまでに公開したいですか?

次へ進む 戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

7

9

Q:ご予算はどのくらいをお考えですか?

次へ進む 戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

8

9

入力いただいた内容を元にお見積りを無料でお送りいたします!

Q:会社名、お名前、メールアドレスをご記入ください。

次へ進む 戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

9

9

Q:お問い合わせ詳細がございましたらご記入ください。

戻る

最短2分でサイト制作のお見積り!HP制作シミュレーター

お問い合わせいただきありがとうございます。

お問い合わせ内容を確認の上、担当者よりご連絡をさせていただきます。

送信に失敗しました。

お手数ですが、最初からやり直していただきますようお願いいたします。

閉じる
TOPへ戻る