ファビコン(favion)はシンボルマーク


ファビコンはサイトの顔

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

ファビコンの説明

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 ファイルの処理(外部リンク)

Currently unrated

コメント

コメントを投稿
コメントするには TORICO-ID にログインしてください。
ログイン コメント利用規約