2019年06月22日

サイトのシンボルマーク、ファビコンを設定しよう！

コラム (104)

SEOコンサルタントの長濱佳子です。

2019年の春、Googleはモバイル検索結果にファビコン（favicon）を表示するように仕様変更しました。

ファビコンは、Webサイトのシンボルマークとして、ブラウザのタブなどに表示している小さなアイコンのことです。

どこのサイトか一目でわかるシンボルマークとしても重要なファビコンについてご紹介します。

■ファビコン（favicon）とは？

ファビコンは、ブラウザのタブなどに表示している小さなアイコンのことです。ブックマークしたときもWebページ名の横に並ぶので、多くの方は見たことがあると思います。

単なるアイコンのように感じますが、ユーザーがどこのサイトなのか一目でわかるシンボルマークとしても重要です。簡単な画像作成能力があればすぐに作れますので、Webページを作るときにぜひ設置しておきたいものです。

■Googleはモバイル検索結果をリニューアル

2019年の春、Googleはモバイル検索結果にファビコンを表示するように仕様変更しました。

Googleでは、ホームページをクロールするたびにファビコンの有無を確認し、ファビコンがあると表示をします。ページ単位でファビコンを切り替えることはできませんが、サブドメイン単位では変更できるのです。

少なくともトップページにはファビコンを指定しておきたいものです。もし、サイト内で複数のテーマがあるようなら、サブドメインごとにファビコンを設定するとよいでしょう。

■ファビコンのサイズやフォーマット、デザインなど

ファビコンは簡単な画像作成とHTMLの知識があればすぐに作れます。

ただ、ファビコンはブラウザごとに推奨サイズが違います。最近ではデバイスの多様化により、20種類以上もあるといわれていますが、サイズとしては以下のようなものがあります。

16px × 16px：IE タブ
24px × 24px：IE9の「ピン留め機能」
32px × 32px：Chrome、Firefox、Safari などのタブ
48px × 48px：WindowsのWebページアイコン
64px × 64px：高解像度のWindows Webページアイコン
152px × 152px：iOS、 Androidのホーム画面
512px以上 × 512px以上：WordPress

いずれにしてもフォーマットは「.ico」がおすすめです。

もし、1サイズだけにすると、きれいに表示されなかったり、正しく縮小できなかったりしますので、「16px × 16px」「32px × 32px」「48px × 48px」のように、いくつか用意するのがおすすめです。

サイズがそれほど大きくないので、デザインについては複雑なものや細かくないものがよいでしょう。

また、白い部分が多すぎるもの、複数の文字が使われたデザインは読みにくくわかりづらいので注意してください。

■ファビコン作成ツール

簡単にファビコンを作成できるツールをご紹介します。
　　
・<a href="http://www.favicon.cc/">favicon.cc</a>
ブラウザ上で手軽にファビコンが作成できるツールです。色を選び、フレーム内の四角を塗りつぶせば完成します。

・<a href="https://ao-system.net/favicon/">ファビコン favicon.icoを作ろう!</a>
16px × 16px、32px × 32px、48px × 48pxの3サイズのファビコンが作れるツール。画像をアップロードして作成ボタンをクリックするだけで、手軽にファビコンが作れます。

■まとめ

ファビコンがあると、検索結果でどこのサイトか一目でわかるようになります。

専用ツールを使えば簡単に作成できますので、ぜひファビコンを設置しましょう。

この記事は2019年6月22日現在の情報を元にしています。

外部サイトへのリンクが切れている場合があります。ご了承ください。