ファビコンはサイトの顔

サイトを検索すると、サイト名や説明の横にアイコン化されたマーク画像があります。
このアイコンは、サイトのシンボルマークを象ったもので作成されています。
検索からでも、文字だけではなく、画像でサイトを意識してもらうために設置されています。
そのため、サイトの顔としてシンボルマークで作られること多いのです。

ファビコンの説明

favicon（ファビコン）とは、Favorite Icon（フェイバリットアイコン）の略です。Webサイトのシンボルマークとして使用されるアイコン。
サイト独自のマークや色で分かりやすく表示されるため、閲覧者がWebサイトを探すときの目印になります。
このファビコンがあると、Webサイトの認知度向上が期待できます。

ファビコンの設置場所

設置場所は、chromeなどの検索結果画面のサイト名などの横やサイトページのタブ、ブックマークバーなどに表示されてます。
また、スマートフォンではブラウザタブ、ホーム画面に表示されます。

ファビコン画像の取得方法

GoogleのURLを使ってファビコンを現状のサイトから取得してダウンロードする方法があります。
こちらの方法はファビコンの品質チェックやリニューアルサイト制作時に役に立ちます。
それはURLの末尾に取得したいサイトURLを入力してブラウザで開くというシンプルな方法です。
URLは

https://www.google.com/s2/favicons?domain=サイトURLを入れる

試しにサイトURLを入れたURLをつくりました。

https://www.google.com/s2/favicons?domain=https://www.mangazenkan.com/

こちらをブラウザで開いてみると


このように画像のみがWeb上に表示されます。
この画像を「名前を付けて画像を保存」やブラウザのダウンロードすれば、画像が取得で取得できます。

表示中のファビコン画像のサイズを変更してみる

URLから表示しているファビコン画像のサイズは、赤く囲った数字が現在表示してる画像のサイズです。
デフォルトだと（16×16）で表示します。

ここを　48　に変更して更新してみると

サイズが48×48になり、画像表示が大きくなりました。
当店のシンボルマークは、SVGファイルで作成していることもあり、16、32、48、64、96、128、256、のサイズが示することができました。
ただし、サイトによっては作られていないサイズだったり、出鱈目な数字を入れると、デフォルト（16×16）が表示されるか、または何も表示されないかのどちらかになります。

ファビコンのサイズ

ファビコンの表示サイズはデバイス、ブラウザ、ブラウザアプリ、表示場所によってサイズはさまざまです。
ファビコンのファイルは通常のものとiOS用とAndroid用が必要です。
基本のディスプレイやWebブラウザのファビコンは、いろいろなサイズもおける、マルチアイコンで作成します。

ファイル名とサイズ対応表
通常のブラウザのファイル名

favicon.ico

iOS用のファイル名

apple-touch-icon.png
apple-touch-icon-precomposed.png

Android用のファイル名

android-chrome.png
android-chrome-192×192.png
android-chrome-256×256.png

ファビコンのサイズ	ファビコンが表示される場所	ファイル名
16px × 16px	通常のディスプレイの各種ブラウザのタブ PCブラウザ(chrome、Edge、Safari)のタブ・お気に入り PCブラウザ(Chrome、Edge)のスタート画面 iOSのタブ	favicon.ico （マルチアイコン）
32px × 32px	Retinaディスプレイの各種ブラウザのタブ PC(chrome、Edge、Firefox、Safari)のタブ・お気に入り PCブラウザ(Chrome、Edge、Firefox)のスタート画面 iOSのタブ	favicon.ico （マルチアイコン）
48px × 48px	Windowsデスクトップのサイトアイコン（ショートカットアイコン）	favicon.ico （マルチアイコン）
64px × 64px	Windowsデスクトップのサイトアイコン（ショートカットアイコン） 【高解像度】	favicon.ico （マルチアイコン）
180px × 180px	iOS（iphone,ipad）のホーム画面 PC/iOS Safariのホーム画面・スタート画面 Android Chromeのタブ、ホーム画面 Mac Safariのお気に入り	apple-touch-icon.png apple-touch-icon-precomposed.png
192px × 192px	Android Chromeのブラウザタブ、お気に入り、ホーム画面	android-chrome.png android-chrome-192×192.png
256px × 256px	Android Chromeのブラウザタブ、お気に入り、ホーム画面	android-chrome.png android-chrome-256×256.png

※表はネット情報を元に独自でまとめたので、すでに適応外になっている場合があります。ご了承ください。

まとめ

　ファビコンのサイズは、ブラウザ、端末機器の進化に合わせて、多様に変化していってます。こちらに掲載したサイズも数年後は対応しなくなっているかもしれません。
1年前まではこのサイズで綺麗に表示されていたのに、シンボルマークが今はぼやけて見えている、なんてことにならないように、日常的にブラウザから自社サイトを検索すると、気づきやすいと思います。また、新しい記事や特集ページを作成した際にページの確認に合わせて、スマホのホーム画面に設置するのもおすすめです。

参考文献

Googleのファビコンの定義
Google検索セントラル「検索結果に表示されるファビコンを定義する」(外部リンク)

Internet Explorer と Mozilla Firefox では、favicon.ico ファイルを要求するタイミングを決定する方法
Mozilla Firefox での favicon.ico ファイルの処理(外部リンク)