【favicon】ファビコンの基本をおさらい
通常のfaviconとIOS/Androidでの設定や注意点など

2023.07.11
2021.11.25

昔はそれほど重視されていなかったfaviconですが、最近ではブラウザのタブなどに表示されるだけでなく、Googleなどの検索結果にもfaviconが表示される仕様になり、faviconを設定しているか否かによって、アクセス数などにも影響を及ぼす次第になっています。

とはいえ、導入にあたってもこれもまた昔と違い、今ではPCだけでなくスマホ全盛の時代でもあり、そのスマホでもAndroidとiOS（iPhone）とそれぞれでまた違う設定になっていたりするので、改めてここにメモしておきます。

とはいえ、faviconの設定は一度自分用の設定を作ってしまえば、後はコピペして微調整すれば終わりという形になるので、自分用の設定を作っておくと楽チンです。

この記事の目次

faviconの基本設定について

実は今のfaviconはスマホの端末や仕様などかなり多岐に渡ってしまっており、細かく厳格に全て対応しようとなると、相当な数の設定が必要になり、その分だけfavicon用の画像もサイズ違いや拡張子違いなど様々なものを用意しなくてはならないとされています。

とはいえ、よほど大企業や大規模メディアなどでない限り、そこまで細かく設定する必要性はほとんどないというのが実情です。

厳格にするなら数十個必要も、3つの設定で対応可

結論から言うと、今のfaviconの設定は下記の3つをしておくという形になります。

通常のfavicon設定（favicon.ico）
iOS用のfavicon設定（apple-touch-icon.png）
Android用のfavicon設定（android-chrome-192×192.png）

実際に事細かく設定していくとなると、上述の通り膨大な数が必要になると言われていますが、実際はこの3つのfaviconの設定をすればおさえておきたいところはおさえられる設定になるかと思います。

実際、自分も実務ではほとんどこの3つでの対応としています。

通常のfavicon設定とコード

では実際にfaviconの設定のためのコードなどを見ておきましょう。

<link rel="icon" href="/assets/img/favicon.ico">

一昔前までは、rel="icon"となっていた箇所が、rel="shortcut icon"という設定でしたが、今はshortcutは不要となり、iconだけで良くなりました。

faviconの拡張子について

一応、faviconの拡張子はそれぞれ変更ができるようにはなっています。
.icoではなく.pngなどで作って、それを指定するという方法もあったりはしますが、あまりおすすめしません。

基本的に何か特定の理由がない限りは、一般的な.icoで作るのが良いと言えます。

faviconのサイズについて

Googleの検索結果にfaviconが表示されるとなった今、かなりfaviconの重要性が高まっていますが、実はfaviconのサイズは、Googleの公式ドキュメントにサイズは48の倍数で設定する。という記載があります。

ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVGファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。
検索結果に表示されるファビコンを定義する

そのため、48×48や96×96などのサイズで設定しましょう。ということが広がりました。
ただ、実際にfaviconのサイズは昔の一般的なサイズだった16×16がベースで、その倍数の32×32で作られていることがほとんどで、この32×32の倍数で作られていく事が多かったです。

今現在は、実際にfaviconのサイズが、48×48の倍数でないとGoogleの検索結果にでないか？というと、そんな事はなく、50×50のサイズや、100×100のサイズのfaviconを設定しているサイトでも検索結果にfaviconが出ていることは確認できています。

同じように、ブラウザ上で表示されるfaviconも、サイズがバラバラでも表示されているので、そこまで厳格にサイズにこだわる必要はないのかもしれませんが、Googleが公式ドキュメントで48×48の倍数と表記していて、検索結果にfaviconが出るか出ないかでかなり影響度が変わるものになるので、favicon.icoはマルチアイコンで作るのがオススメです。

通常のfaviconはマルチアイコンで作っておけばまず問題無し

マルチアイコンとは、1つのファイルの中に複数のサイズが用意されているものになります。そのため、マルチアイコンでfavicon.icoを作る事で、16×16が必要な際には16×16を、32×32が必要なら32×32を、48×48が必要なら48×48のサイズを表示するという形になります。

どうやって作れば？と思うかもしれませんが、今の世の中、便利なツールを作ってくれている方がいて、「様々なファビコンを一括生成」のサイトで作る事ができます。

使い方は日本語サイトなので見てすぐわかる形になっていますが、画像ファイルを選択して、ファビコン一括生成をクリックすれば、プレビューが表示されますので、確認したら下にあるボタンのファビコンダウンロードをクリックすれば、zip形式で全データがダウンロードされます。

その中にある「favicon.ico」がマルチアイコン化されたファビコン用のデータになっています。

iOS用のファビコン設定

次にiOS用のfavicon設定になります。
ただ、1つ注意しなければいけないのは、このiOS用のfavicon設定というのは、あくまでもスマートフォンのホーム画面にショートカットリンクの設定をした時に使われます。

ただiOSの場合、SafariとChromeで挙動が変わり、Safariの場合は、ブラウザ上のタブやお気に入りのfaviconは、通常のものが反映されますが、iOSのChromeの場合は、ブラウザ上のタブやお気に入りのfaviconもiOS用のものが反映される仕様に現状ではなっています。

これは後述するAndroidでも同様のため、Chromeの動作的には、通常のicoではなくそれぞれのOS用のfaviconが設定されていたらそちらを優先するというのが今現在の仕様になっているようです。

正直なところ、一般ユーザーがどこまで通常のサイトのショートカットをスマホのホーム画面に置いてくれるかというのは、サービスやサイト次第かとは思うところはありますが、せっかくそういったホーム画面に置いてくれるユーザーというのは、常連だったり上顧客の可能性が高いので、しっかりとfavicon設定はしておいた方が良いと言えます。

<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png" sizes="180x180">

こちらは通常のfaviconと違い、png画像になっていて、サイズは180×180で作る必要があります。

iOS用のfaviconは透過されないので注意

1点だけ注意点としては、apple-touch-icon画像はpng画像で作る事ができるため、透過処理などをすることも多いと思いますが、実は透過処理をしていたとしても、透過されません。

むしろ、透過処理をしていると、黒になってしまい意図したデザインとはかけ離れてしまう恐れがあるため、注意しておきましょう。

faviconはテスト段階などで、一度自分たちの端末などでどう反映されるかをチェックしておくようにしましょう。

Android用のfavicon

同じくAndroid用のfavicon設定も記載しておきます。

iOSのところでも少し触れましたが、Androidの場合、多くはブラウザはChromeを使う人がほとんどかと思います。

Android用のfaviconの設定をすると、ホーム画面へのショートカットだけでなく、Chromeのブラウザのタブ上やお気に入りなどに表示されるfaviconもAndroid用で設定したものになります。

とはいえ、一般的にfaviconをそれぞれで見た目やデザインを変えるという事はほとんどないかと思いますので、それによって何か影響が出るということはないとは思います。

<link rel="icon" type="image/png" href="/assets/img/android-touch-icon.png" sizes="192x192">

Android用もiOS用と同じように、png画像になります。
ただし、サイズはこちらは192×192で作ることになっています。

Android用のfaviconは透過される

iOSと違って、Android用のfaviconは透過されます。
そのため、自由にデザインをして作る事が可能になっています。

ただ、faviconは通常1つ大元のデザインを作ったら、あとはそれをサイズ変更・拡張子変更などで横展開をしていくという作りになり、iOSと他で対応が違う場合でそれぞれに合わせてfaviconを作り直して処理するかというとそこまで手間はかけないのが一般的かと思います。

自分も実際の業務では透過処理などはせず、白背景や黒背景にしてfaviconを作ってその1つからサイズ展開や変更などをツールで一括書き出しなどして、全てまかなえるように対応しています。

実際にソースに書くときは3つまとめて

実際にHTMLタグに記載するときは、それぞれ3つをまとめて記載します。

<link rel="icon" href="/assets/img/favicon.ico">
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="/assets/img/android-touch-icon.png" sizes="192x192">

そのため、実際の制作で使う場合はこの3つのタグを貼り付けて、それぞれの画像を作ってしまえばOKという形になります。

それぞれ書き出すのが面倒という方は、今ではfaviconジェネレーターや変換などのツールがオンライン上に多数存在していますので、大元となるfaviconの画像を大きめサイズで作り、それを一括ツールなどに投げてしまえば、必要なファイルが全てまとめて揃える事ができるようになります。

自分も通常の制作の流れでは、上記で書いたサイトの「様々なファビコンを一括生成」を使って作っています。