Webページを閲覧している際、タブに表示されているページタイトルの左に“favicon（ファビコン）”というアイコン画像があります。
このfavicon（ファビコン）は、小さいながらもリピーターからすると瞬時でどこのサイトか認識することもでき、逆に言うとリピーター対策にもなり、ブランディング構築にも繋がります。
そのため、見た目や作業的としてはかなり細かいものなので、後回しにしがちかもしれませんが、他にもブックマークした際にも表示されたり、最近では検索結果にも表示されるようにGoogleの検索結果が仕様変更されていることから、もはや必須とも言える要素と言えるでしょう。
そしてこのfavicon（ファビコン）は、非常に小さく表示されているため、細かく表現・デザインするのではなく、ワンポイントでブランドを象徴するアイコンとして目立たせる必要があり、ぱっと見で何が描かれているのかわからないようでは意味がありません。
ということで今回は、ページのリピーター対策やブランディング効果、さらに検索結果ページでのクリック率に期待できる“favicon（ファビコン）”について作成方法や記述方法などを詳しくご説明したいと思います。
目次
favicon（ファビコン）とは？
ではまずfavicon（ファビコン）とは“favorite icon”の略語で、検索結果のページタイトルの左や閲覧中のタブをはじめ、意外と様々なところで表示されるアイコン画像を意味し、作成する画像サイズの違いや表示させるためのhtmlファイルへの記述方法など…思っていたより知っておくべき内容が多く、単純にPCブラウザのタブに表示される最低限（16px×16px）のサイズのみ設定しているという方も多いのではないでしょうか？
そして、下記のようにfavicon（ファビコン）はサイトをイメージ付ける大切なアイコンでもありますので、小さなワンポイント・画像ではありますが、ページタブ以外にも多く目に付く場所に関しては対策しておきたい要素でもあります。
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。
特に最近はPC検索よりもスマホ検索の方が多い傾向にありますから、スマホでページをショートカット作成した際にもこのfavicon（ファビコン）が使用されるため、Androidも含めスマホにも対応しておきたいところです。
それ以外にも、しっかりとしたコンテンツを作り込むことである程度ブランディングが構築できていれば、多少順位が低くてもこのアイコンが目印になることによって検索ユーザーは信頼したサイトから情報を得ようと考え、クリック率にも大きく影響するでしょうし、新規獲得やリピーター化の糸口となるチャンスでもありますので、しっかりと理解して最低限のfavicon（ファビコン）設定を行っておきましょう。
また、現在favicon（ファビコン）がどのように表示されているのかを気軽にチェックできる“Favicon checker”といったツールも公開されているので、一度確認してみても良いかもしれません。
favicon（ファビコン）を作成するメリット
favicon（ファビコン）は、上記でもご説明した通り検索結果にも表示されますし、閲覧中のタブにも表示されることによって潜在層にまずはご自身のサイトを認知させることができます。
さらにブランディング目的でSNSを運用しているとしたら、そこでも目に触れる可能性も0ではありません。
そこで今までに見たことのあるアイコンがあると親近感も沸きますし、徐々にリピート化させることにも繋がります。（些細なことですが、ブランディングとしてのシンボルを何度もユーザーに閲覧させて刷り込んで記憶させることも大切です。）
この“ブランディング”について詳しくは、こちらの「ブランディングの意味と重要視するべき要点」もぜひご覧ください。
特にサイトタイトルや社名の頭文字をわかりやすく目立つ配色によってシンボル化し、favicon（ファビコン）に設定しておくことが重要で、何より「このサイトなら信頼できる」と思われるようなコンテンツを作り込み、日々ブラッシュアップさせることはサイトを運営しているに当たって根幹となる考え方で、質の高いコンテンツがあってこそのブランディングということを念頭に置きましょう。（中見が薄いとユーザーは付きません。）
表示される場所について
続いてこのfavicon（ファビコン）が表示される場所とは、主に以下のような箇所に表示され、大きく分けると…ブラウザ用（タブ・検索結果）・スマホ用（ショートカット作成時）の2パターン必要となります。
- ブラウザのタブ
- スマホからショートカットを作成したアイコン
- ブックマークしたページタイトルの左
- 検索結果ページのタイトル左
2パターンとは言っても、現在は様々なサイズのデバイスがあり、favicon（ファビコン）のサイズも20以上あると言われており、全て細かく対策するのであれば各種サイズの異なるfavicon（ファビコン）を用意する必要があります。
ただ、後ほど詳しくご説明しますが、各種対応するサイズを知ることで押さえておきたい最大のサイズで画像を用意しておけば、自動で縮小されて表示されますので作業的にはかなり少ない行程で済むはずです。
このようにfavicon（ファビコン）はパソコン用（タブやブックマーク）、そしてスマホ対応することである程度カバーできるかと思われますので、今回は主にその2点においてご説明していきます。
他にもWindowsのスタートメニューに表示されるパネルや、タスクバーにピン留めした際に表示される画像もありますが、そこまで対応する必要かどうかは検討次第で、サイトを目立たせる・ブランディング効果が目的なら最低限上記の2パターン用意しておくと良いでしょう。
キーワード選定におすすめのキーワードツールをご紹介しています。
favicon（ファビコン）の作成方法について
基本的にfavicon（ファビコン）のファイルフォーマットは「ico」で書き出す必要があります。（中にはpng対応しているブラウザもありますが、バージョンによって異なるため“ico”形式の方が簡潔かと思われます。）
これはデフォルトのPhotoshopでは書き出すことができませんので、“ICO Format プラグイン”を別途インストールするか、数多く公開されている変換ツールサービスを利用することとなります。
そして、先ほどもご説明した通りこういったfavicon（ファビコン）は各デバイスや使用される箇所によってサイズが異なり、その数もかなり多く存在するため、手作業で書き出すのではなく、変換サービスを利用して大きめな“ico”形式のファイルをアップしておくと、それぞれに適したサイズに縮小されるので、どこまで対応するのか？をまずは確認する必要があるというわけです。
画像サイズについて
続いてfavicon（ファビコン）に使用する画像サイズについてですが、こちらは先ほどもご説明した通り20以上もの種類があり（下記参照）、全てに対応するには手間となってしまいますので、対応したい最大のサイズを選び、“ico”形式に書き出してくれる無料ツールの利用をおすすめします。
参考：RealFaviconGenerator FAQ
上記のページを参考にすると、使用される場所はともかく、少なくとも以下のように様々なサイズが存在します。（単位はpx）
- 16×16
- 32×32
- 36×36
- 48×48
- 72×72
- 96×96
- 144×144
- 180×180
- 192×192
- 256×256
- 384×384
- 512×512
また、多くの記事ではタブや検索結果に使用されるfavicon（ファビコン）のみ説明しているものが多い傾向です。
しかしタブに表示させるサイズ（16×16）だけでなくスマホやタブレットでショートカットを作る際の最大サイズ（180×180）も別途用意しておくと良いでしょう。
参考：App Icon – Icons and Images – iOS – Human Interface Guidelines – Apple Developer
さらにこのfavicon（ファビコン）にはGoogleの公式ページで下記のようにガイドラインが定められていますので、一読しておくと良いかと思われます。
※検索結果ページに表示されるfavicon（ファビコン）についてのガイドラインです。
検索結果の横にファビコンを表示するには、次のガイドラインに準拠する必要があります。なお、すべてのガイドラインが満たされても、ファビコンが検索結果に表示されるかは保証されません。
- Google がファビコンのファイルとホームページをクロールできること（Google をブロックしないこと）。
- ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
- ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
- ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
- わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
対応フォーマットについて
次に、対応する画像フォーマットについてですが、主にPCで使用するfavicon（ファビコン）は“ico”形式で指定します。
そして、スマホ対応する際は“png”形式で画像を書き出し、header内に記述する方法も異なりますので、両方をひとつにまとめることはできません。
また、“ico”形式で書き出す場合、複数の画像サイズをまとめることも可能なマルチアイコンとしても活用できますので、“16×16”だけでなく、Retina用のサイズ（32×32）、その他のサイズ“48×48”を含めた“ico”ファイルを用意し、スマホのショートカット作成時に表示される最大のサイズ（180×180）を“png”形式で用意する必要があります。
とは言っても、“ico”ファイルは自動的に適したサイズに縮小されるため、大きめのサイズでひとつ用意しておくという手もあります。（上記のようにサイズを指定するのは綺麗に見せるためです。）
それ以外にも透過させるデザインの場合は、当然“png”で書き出す必要があるため、そちらを流用して各種サイズを用意するか、または対応する最大のサイズを一枚用意しておくと良いでしょう。
作成ツールを利用する
では実際にfavicon（ファビコン）を用意するために便利なツールを利用してみましょう。
こういった“ico”に変換するツールは数多く公開されており、それぞれ特徴や仕様が異なりますので、目的に合ったツールで書き出し、正しい記述方法でアイコンを設置して実際に表示されているかどうか確認してみてください。
特にPC用の“ico”ファイルではマルチアイコンとして複数のサイズで書き出す、もしくは大きめなサイズで用意しておくことを検討しておくと良いかと思われます。
favicon.cc
この無料ツールは、ドット打ちすることで1からfavicon（ファビコン）を作成することも可能ですが、すでにある画像をアップロードすることで、“ico”形式のファイルに自動変換してくれます。
ただ、書き出されるサイズは、最小サイズとなる“16×16”となってしまうので、他のサイズも用意したい場合は注意が必要です。
Faviconジェネレーター
こちらのツールは、ひとつの画像をアップロードすることによって、以下のサイズを含むマルチアイコンとして“ico”ファイルを書き出すことができる便利なツールとなっています。（例えば256×256を含めて書き出したい場合、そのサイズで画像をアップします。）
- 16×16
- 24×24
- 32×32
- 48×48
- 64×64
- 128×128
- 256×256
これだと複数のファイルをアップロードする必要がなくなるため、マルチアイコンの“ico”ファイルを書き出すには非常に便利で、透過（png）にも対応しているため、適宜利用すると良いでしょう。
※書き出すサイズをそれぞれ指定することも可能です。
様々なファビコンを一括生成。favicon generator
様々なファビコンを一括生成。favicon generator
こちらも、512×512～700×700の画像（png・jpg・gif対応）を一枚アップするだけで、Windowsのスタートメニューに表示されるタイルにまで網羅したサイズで書き出してくれる無料ツールです。
また、記述するタグも表示してくれるので、favicon（ファビコン）を完全対応したい方におすすめのツールと言えるでしょう。
ただしWindowsにも対応すると記述するタグや画像はかなり多くなってしまいますが、PCとスマホ対応だけを考慮するならかなり少ない行程で完了します。
他にも“16×16”・“32×32”・“48×48”のファイルをマルチアイコンとして“ico”形式に書き出す“ファビコン favicon.icoを作ろう!”といった簡易的なツールも公開されています。
iconifier.net
こちらは英語版ではありますが、基本となる画像を一枚アップするだけでPC・スマホに対応する各種画像サイズと、headerタグに記述するべき内容が表示される便利なツールです。
また、もちろんpngにも対応しているので、透過させたいfavicon（ファビコン）でも問題なく書き出すことが可能です。
キーワード選定に悩んでいませんか？
favikon
こちらは、一枚の画像をアップし、“ico”か“png”といったフォーマットを選択・ダウンロード可能なツールで、先ほどご紹介した“favicon.cc”と同じくサイズは最小の“16×16”のみといった比較的簡易的なfavicon（ファビコン）作成ツールと言えます。
記述方法について
では、画像を用意できたら、続いてfavicon（ファビコン）を表示させる記述が必要となります。
これは、各ページのheader内に下記のような画像ファイルへのurlを記述します。（絶対パス・相対パスのどちらでも構いません。）
そのため、共通テンプレートとして使用しているhtml（もしくはphp）ファイルに適宜追加しておくだけで良いでしょう。
まずはPCで表示されるタブや、スマホでの検索結果ページに表示されるページタイトル横の指定です。
<link rel="icon" href="/favicon.ico" />
ただ、こちらは先ほどのWikipediaのページを参考にすると…ルートディレクトリに“favicon.ico”という拡張子・ファイル名で画像を置いてあれば、特に記述がなくともクローラーがfavicon（ファビコン）と認識するようです。
※各サイズをひとつのファイルにまとめる“ico”形式のマルチアイコンとなっているため、できれば各サイズに対応しておくことが大切です。
続いてスマホの場合（ショートカットを作った際に表示されるアイコン）は、以下のように記述します。「rel=”apple-touch-icon”」と記載されていますが、実際には“Android”でも認識します。
※180pxというのはRetina用iPhoneアプリアイコンのサイズです。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
ただし、Androidのバージョンなどによってうまく表示できない場合は、以下の記述を追加して確認してみてください。（この場合のサイズは“192×192”となっています。）
<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">
WordPressにてfavicon（ファビコン）を設定する
上記のようにheader内にタグを記述することでfavicon（ファビコン）を設定する方法以外にも、WordPressをお使いなら簡単に設定することも可能です。（バージョン4.3以降）
下記画像のように、管理画面の「外観」＞「カスタマイズ」＞「サイト基本情報」に“サイトアイコン”という項目がありますので、“512×512”のサイズで“ico”形式にする必要もなく、“png”形式のファイルを用意して選択します。
これによってheader内に記述することなくfavicon（ファビコン）を表示させることができます。
ただ、注意点としてはルートディレクトリに“ico”ファイルを置くだけの時と同じく、PC用のタブや検索結果ページのみ表示されます。（スマホのショートカットアイコンには適応されません。）
そのため、よくWordPressを利用している場合でfavicon（ファビコン）を表示するならもはやタグの記述は必要ありません。といった記事を見かけますが、スマホのショートカットアイコンにも対応するならぜひ上記のタグを記述して細かな要素ながらもブランディングに少しでも貢献するよう心がけるべきです。
むしろルートディレクトリに“favicon.ico”と“apple-touch-icon.png”を置いておくだけで自動的に表示（PCもスマホショートカットも）されているようですので、一度試してみると良いでしょう。
まとめ
今回は、閲覧中のタブやスマホの検索結果ページに表示される企業・サイトのシンボルとなる“favicon（ファビコン）”について意味や仕様・設置方法などを詳しくご説明しました。
このように基本はタブやブックマークした際に表示されるもので十分でしたが、特に最近だとスマホ検索の方がPCを上回っているため、お気に入りのページ（トップページなど）をスマホのショートカットとして保存しておくケースも珍しくありません。
そういった中で、正しくfavicon（ファビコン）が設定されていないとするとブランディングやユーザーへの認知にも大きく影響するため、しっかりと理解して、どこまで対応するのかを判断し、潜在層の獲得のためにも正しく設置しておくことが重要です。
