みなさんはFaviconについてしっかり説明できますか？サイトやアプリにおいておまけ程度の認識でいないですか？（昨日までの私...）
業務においても、個人開発においても、そう何度も作成・設定するものではないので、久しぶりに扱うとよくわからなくなりました。
そのため改めて調べてまとめようと思います。
同じ境遇の方、ぜひ読んでいただけると嬉しいです。
faviconとは
faviconの歴史や概要
faviconとは、Webサイトのブラウザタブのタイトルやブックマークに表示される小さなアイコンです。（以下添付画像左部分のアイコン）
このアイコンは、1999年にInternet Explorer 5で初めて対応しました。小さなグラフィックでありながらも、ブランディングにおける重要な要素の一つとして活用されています。
faviconの役割と重要性
faviconはユーザーがタブを記憶したり、サイトの認識を高めるために重要な存在です。その作成は、ブランドイメージを確立し、ブラウザのユーザー体験を向上させるために必要です。
確かにもしアイコンがない場合を考えると、サイトをどのタブで開いたか認識しづらいです気がしますよね。また、Wordpressなどのデフォルトのアイコンを使用する場合も同様に他サイトとの違いを認識しづらいかもしれません。
私たち意外にこのちっこいアイコン見てるんですよね...
faviconに使用できるフォーマットと比較
faviconに使用可能なフォーマット
-
ICO
- favicon用に最も普通に使用されるフォーマット。複数のアイコンサイズを内包できるのがメリット。
-
SVG
- ベクトルデータのため、スケーラビリティーに優れる。高解像度で設定できる。
-
PNG
- 高解像度なビットマップファイル。しばしばサブオプションとして使用される。
-
JPEG
- コンプレッションがかかるが、普及したフォーマット。透過できない為、注意。
-
GIF
- すべてのブラウザでサポートされていますが、アニメーションが必要な場合に限る。
-
WebP
- 高品質でファイルサイズが小さい。使用可能なブラウザーが限る。
icoフォーマットの「複数のアイコンサイズを内包できる」というのは、例えば青リンゴのfaviconを設定したい場合に、①（16px × 16px）②（32px × 32px）③（48px × 48px）という3つのサイズパターンを用意したら、専用のツールやプラグインで1つの.ico形式の画像に変換できます。
その為、サイトの表示環境を側っても内包しているサイズパターンの分だけ解像度を保つことができるというわけです。
フォーマットの比較
| フォーマット | 解像度 | サポート性 | ファイルサイズ | ブラウザサポート |
|---|---|---|---|---|
| ICO | 高い | 複数アイコン対応 | 大きい | 高い |
| SVG | 最高 | スケーラブル | 小さい | 高い |
| PNG | 高い | 限定的 | 中くらい | 高い |
| JPG | 低い | 限定的 | 小さい | 高い |
| WebP | 高い | 限定的 | 最小 | 低い |
フォーマットとしてはicoの使用率が高い気もしますが、昨今のブラウザ状況（IE終了）等を考えるにSVGやPNGでも正直問題ないと思います。大きい画像の場合SVGだと重くなりますが、faviconに設定する画像はそもそも小さいことが多いので、SVGで問題ない気がします。
どのディレクトリに配置すべきか
faviconは、一般的にWebサイトの格設ファイル「rootディレクトリ」に配置されます。これは、多くのブラウザーが自動的に「/favicon.ico」を検索するためです。しかし、HTMLヘッダの<link rel="icon" href="URL">タグを使用することで、別のディレクトリやファイルを指定できます。
また、最近でいくとフロントエンドはJSフレームワークの使用が常態化しているかもしれません。各フレームワーク・ツールでは公式ドキュメントにfaviconについて記載されていると思うので、ご使用になられるフレームワークのドキュメントを読むのをオススメします！
いくつかドキュメント添付します。
Nuxt.js
https://nuxt.com/docs/guide/directory-structure/public
Next.js
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
Astro
https://docs.astro.build/en/basics/project-structure/#example-project-tree
他フレームワークは分かりませんが、基本的にfavicon画像の配置場所はお馴染みのpublicディレクトリ直下かつindex.htmlと同じ階層に置くのが通例っぽいです。
ちなみに最近React + Viteでプロジェクト立ち上げたときには、favicon画像のみpublic内に配置しindex.htmlはルート直下に配置しましたが、build時に自動でfavicon画像がpublicからルート直下に移動するので、無事描画されました。
まとめ
faviconは、Webサイトのアイデンティティを高め、ユーザー体験を向上させる重要な要素です。使用するフォーマットを選ぶときは、サイトの要件に合わせて選定しましょう。また、ファイルの配置場所にも注意し、しっかり描画できるように設定を行いましょう〜
本記事を読んでいただきありがとうございました！