トップページ > サイト作成 > favicon（ファビコン）の適切なサイズでの作成方法とSEO への影響
favicon（ファビコン）の適切なサイズでの作成方法とSEO への影響
ブラウザの一部表示機能であった favicon（ファビコン）が最近では検索結果画面にも表示されるようになり他サイトとの差別化と権威性を示す指針になりつつあるので、favicon（ファビコン）の作成方法と SEO への影響について紹介する。
このページの目次
1. favicon（ファビコン）とは
favicon（ファビコン）とは、Web サイトのイメージアイコンのことで、favicon（ファビコン）を設定しているとブラウザのタブやアドレスバー、ブックマークの一覧に表示される。
favicon（ファビコン）を設定していなくても Web サイトの表示には影響せず、ブラウザによってfavicon（ファビコン）を表示される箇所が空欄、またはブラウザごとに用意されている代替えアイコンが表示される。
最近では Google など検索サイトの検索結果画面にサイトタイトルや概要文と一緒にfavicon（ファビコン）も表示されるようになっている。
2. favicon（ファビコン）の代表的なサイズ
favicon（ファビコン）の代表的なサイズは次のようになっており、縦横が同じながらの正方形の画像を用いる
- 16px × 16px：Internet Explorerのタブ
- 24px × 24px：Internet Explorer9の「ピン留め機能」
- 32px × 32px：Chrome、Firefox、Safari などのタブ
- 48px × 48px：Windows のアイコン、検索結果画面
- 64px × 64px：高解像度の Windows アイコン
- 152px × 152px：iOS や Android のアイコン
ブックマークやブラウザのタブは 16px × 16px または 32px × 32px が標準的に利用されてきたが、昨今では Google など検索結果画面にも favicon（ファビコン）が表示されるようになり、48px × 48px の倍数で作成するようにガイドラインに明記されているため、48px × 48px の大きさで作成するとよい。
3. favicon（ファビコン）の作成方法
favicon（ファビコン）の作成方法は、まずｈ favicon（ファビコン）の元となる画像を .jpeg や .png で用意した後に、.ico に変更する流れとなる。
.jpeg など元とのなる画像は Windows に初期インストールされている「ペイント」や Adobe 社の Photoshop など画像が作成できるソフトで用意する。
次に .ico にする方法は 2 通りあり、まず 1 つ目は作成した .jpeg などの画像を Web サーバに設置した後に、拡張子を .ico に変更する。
アップロード前に .ico にするとブラウザで正常に動作ない場合があるため、サーバ上で下記のコマンドのように変換するようにするとよい。
# mv favicon.gif favicon.ico
作成した画像を .ico にする 2 つ目の方法としては、.ico に変換するプラグインや Web サービスを利用する。
Photoshop であれば .ico に変換するプラグインが用意されており、Web サービスを利用する場合であれば「FavIcon Generator」が代表格である。
4. favicon（ファビコン）の HTML 内への設定方法
作成した favicon（ファビコン）は Web サーバにアップロードしただけでは正常に読み込めないため、Web サイトの HTML ソース内に favicon（ファビコン）が設置されているパスを指定する必要がある。
favicon（ファビコン）のパスはブラウザごとに解釈が異なるため、下記のように複数行記載する必要がある。
<link rel="icon" type="image/x-icon" href="{サイトフルパス}/favicon.ico">
<link rel="shortcut icon" href="{サイトフルパス}/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="{サイトフルパス}/favicon.ico">
icon や shortcut は Chrome や Firefox で favicon（ファビコン）を認識させるために必要で、apple-touch-icon-precomposed は iOS など Apple 社のスマホなど携帯機器向けの設定となる。
favicon（ファビコン）を指定する場合は http から始まるフルパスか、/ で始まる絶対パスで記載する必要がある。
5. favicon（ファビコン）が無い場合の影響
favicon（ファビコン）を Web サイトに設定していなくてもブラウザの表示上では影響は無いが、ブラウザによってはサイト表示の HTML 取得時に favicon.ico を強制的に取得しようとすることがある
それにより Web サーバには下記のように favicon.ico が無いことを示すエラーログに大量に痕跡が残るため、回避するために 2 つの案がある。
[Thu May 18 15:35:48 2021] [error] [client ***.***.***.***] File does not exist /var/www/favicon.ico
favicon のエラーを残さない 1 つ目の対応策は favicon を作成して Web サーバに設定してエラーにならないようにすることである。
favicon を設置することでユーザビリティも向上するのでエラー回避のために設置するとよい。
favicon のエラーを残さない 2 つ目の対応策は、アクセス時に特定のファイルがサーバに無い場合に発生する 404（Not Found）をエラーログに残さないように Web サーバの設定を入れることで回避できる。
利用している Web サーバが Apache の場合は、httpd.conf に下記の 2 行を入れることで .ico や .gif など画像が存在しない場合にエラーログに出ないようになる。
SetEnvIf Request_URI "\.(gif)|(jpeg)|(jpg)|(png)|(ico)$" no_log CustomLog logs/error_log common env=!no_log
6. favicon（ファビコン）の SEO への影響
favicon（ファビコン）を Web サイトに設置することで SEO へに影響があるかについては現時点でfavicon（ファビコン）が無いサイトが検索結果の上位に表示されていることから SEO には影響しないと考えられる。
しかし、利用者にとって有益なサイトを SEO の重点に置く検索エンジンにおいては favicon（ファビコン）の有無が他サイトとの差別化と権威性を示す指針すると可能性は高く、favicon（ファビコン）があるだけでも利用者のユーザビリティが上がるので設置することをお勧めする。
関連記事
スタイルシート（CSS）で多用しないが知っていると便利なプロパティ
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から多用されないが知っておくと利用する場面があるかもしれないプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトに利用されるプログラムの一種で、CSS の基本的な使い方と実際に指定するプロパティの一覧を紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から余白や回り込みなどレイアウト設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中からリストタグの形式や配置を設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から枠線の色や太さを設定する使い方と実際に指定するプロパティを紹介する。
