自社サイトにファビコンは設置していますか？

スマートフォンでGoogle検索すると検索結果にファビコン表示さるようになっています。今やファビコンはWebサイトのシンボルマークとなり自社のブランディングにも貢献しています。
今回はファビコンの設置方法と役割について説明していきます。

ファビコンとは

ファビコン（favorite）は、、favorite icon（フェイバリット・アイコン）の意味でホームページのシンボルマー的な役割を担うものです。
ファビコンを設置すると、タブブラウザやお気に入り登録（Google Chromeの場合はブックマーク）した時などに設置したファビコンが表示されるのでサイトやページを判別する目印となります。
特にタブブラウザの場合タブをタブを沢山開いているときにファビコンが目印となるのでユーザーにとてはわかりやすのがメリットです。
過去にもこのブログでファビコンについて説明しています。

favicon（ファビコン）のサイズ

faviconのサイズはブラウザによりいろいろなサイズがありますが、おもに下記3種類が代表的なサイズになります。
・16px × 16px　Internet explorerのタブ
・32px × 32px　Chrome、Firefox、Safariなどのタブ
・48px × 48px　Windowsのサイトアイコン

ファビコンの作り方

ファビコンのフォーマットは、「.ico」が一般的です。
.pngやgifでファビコンとなる画像を作成して、ファビコンを作成してくれるサービスを利用します。

■ファビコン favicon.icoを作ろう!
https://ao-system.net/favicon/

ファビコンの設置方法

head部分に下記のコードを記述します。
〇〇〇部分にファビコンのパスを記述します。

<link rel="icon" type="image/vnd.microsoft.icon" href="〇〇〇/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="〇〇〇/favicon.ico" >

Googleが提唱するファビコン

ファビコンについては、Googleがガイドラインを発表しています。Googleのガイドラインを守って作成するようにしましょう。
Googleが提唱するファビコンについては、Search Consoleヘルプに「検索結果に表示されるファビコンを定義する」として掲載されています。

• Google がファビコンのファイルとホームページをクロールできること（Google をブロックしないこと）。
• ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
• ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
• ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
• わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

引用元：Search Console ヘルプページ

まとめ

ファビコンはGoogleの検索結果にも表示されるようになり、ホームページを制作したらなファビコン（favicon）を設定するのは必今や必須となっています。
ファビコンはホームページのシンボルマー的な役割をになっいるので、まだ、ファビコンを設置していない方はこの機会に設置してみてはいかかでしょうか。