favicon設定方法の備忘録【SEO対策】

favicon設定方法について調べたので備忘録として投稿します。

favicon(ファビコン)とは?

faviconとは、ブラウザのタブや検索結果の横についているアイコン画像のことです。
これにより読者がサイトを認識しやすくなりユーザビリティが上がるとともに、ブランディング効果も期待できます。

SEO対策としても重要な設定ですので、是非この機会に導入を検討してみてください。

ちにみにfaviconの設定について調べる中で気付いたのですが、記事によって書いてあることが異なってるものが多く、とても混乱しました。
このようになった理由としては、下記のような背景があると考えています。

  • 頻繁な仕様変更により、新旧様々な設定方法が出回っている。
  • 用意すべき画像サイズの種類が多く、人により推奨しているサイズがマチマチだから。

こちらの記事では多くの記事を調べた結果、私がベストだと思う方法を紹介しますので、是非参考にしてみてください。

設定方法について

早速favicon設定方法について説明します。

ポイントは以下の3点です。

  • 画像はfavicon用マルチアイコン(.ico)とスマホ用アイコン(.png)の2種類を用意する。
  • rel属性のshortcutは記述はせず、IE9以降の対応とする。
  • 最終的な表示確認は実際のブラウザを使用して確認する。

画像サイズ、形式について

用意すべき画像ファイルは16×16、24×24、32×32、48×48のico形式のマルチアイコン(複数の画像サイズが一つのファイルにまとまったもの)と、180px×180pxのpng形式のファイル、2つで良いでしょう。

他のサイズも推奨しているサイトもありますが、あまりファイル数が多くなるとサイトが重くなってしまうので、上記のファイルで品質上の問題があれば追加しましょう。

ファイルの作成方法ですが、おすすめのfavicon作成サイトを2つ紹介します。
どちらもおすすめする理由としては、用意する素材画像が1つで済むという点です。

Faviconジェネレーター

こちらが優れている点は、16×16、24×24、32×32、48×48、64×64、128×128、256×256の最大7種類のサイズのマルチアイコンが作成でき、どのサイズを作るかを選択可能なところです。
作成するサイズより大きいサイズの素材画像を用意すると良いでしょう。

favicon generator

こちらも用意する素材画像は1つでOKですが、出力される画像サイズは16×16、24×24、32×32、48×48の4種類で固定され、選択はできません。
ただこちらの優れた点としては、apple-touch-icon.pngを始めとする様々なサイズのpngファイルも同時に作ってくれるところです。
(こちらのサイトではapple-touch-icon.pngしか使用しませんが、表示をリッチにしたい方は他のファイルも使ってみてください。)

用意する画像サイズは512×512~700×700pxとしましょう。

必要ファイルを作ったらファイル名は下記のようにし、サイトのルートディレクトリに配置しましょう。
favicon用16px×16px : favicon.ico
スマホアイコン用180px×180px : apple-touch-icon.png

記述コード(対応ブラウザについて)

コードは下記になりますので、headタグの中に記述してください。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 

ちなみにサイトによっては下記のコードを紹介しているところもありますが、IE8以前の古い仕様に対応するコードで既に非準拠となっている書き方のため、使わないようにしてください。

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

もし対応するべきブラウザが、IE11以降のみでOKなのであれば、下記コードでも問題ないです。

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

表示確認方法

表示確認をするツールとしては、Favicon Generatorがシンプルで使いやすいのでおすすめです。

ただ表示確認ツールは、最新の仕様に対応しきれていない場合もあるため、最終的には実際のブラウザで確認することが望ましいでしょう。
下記のブラウザとOS環境を確認しておけば、基本的には問題ありません。

ブラウザ : Chrome, Safari, Edge
OS : Windows, MacOS, iOS, Android

以上がfavicon設定方法の説明になります。

最後までお読みいただきありがとうございました。