Faviconの基礎知識。

サイトにFavicon(ファビコン)を設定するとき、HTMLのlinkタグでの記述方法や適切なアイコンサイズなどの明確な規定が分からなかったので、調べた基礎知識のメモ。

Faviconの概要

1. Faviconの概要

• Favicon(ファビコン)とは、Webサイト運営者がシンボルマークとしてWebサイトやWebページに設定したアイコンの俗称。
• Faviconは「favorite icon」を縮約した混成語。
• Faviconの始まりは、W3CによるHTML標準の仕様ではなく、MicrosoftのブラウザであるInternet Explorer 5の独自機能。(該当Webサイトのディレクトリから「favicon.ico」ファイルの存在を調べ、存在する場合はそのファイルを該当Webサイトのアイコン画像として取り込むというIEの機能。)
• その後、MicrosoftはFavicon用のicoファイルの配置場所をHTMLの「link」タグで任意に指定できる方法をサポートする。
• ico形式にはIANA(インターネット番号割当機関 : Internet Assigned Numbers Authority)に登録されたMIMEタイプの割り当てがないという問題があったが、2003年にico形式が「image/vnd.microsoft.icon」として登録され、この問題は解決した。
• ico形式がIANAに登録される以前は、未登録トークンを「x-」で表すという規則から「image/x-icon」というMIMEタイプが使用されていた。
• Mozillaが従来のico形式以外にpng形式を加え、さらに複数のファイル形式の重複指定をサポートするようになり、書式の問題が解決した。
• 以降、他の多くのブラウザがこの機能を搭載するようになった。

※ 当初は「llink」タグの「rel」属性を「rel=”shortcut icon”」と指定する仕様だったが、半角スペースがあるために非対応ブラウザでは2つの値として解釈されてしまう問題があるので、現在は「rel=”icon”」と指定する仕様になっている。

2. Faviconが使用される場所

WebサイトにFaviconが正しく設定されている場合に、そのFavicon用画像が表示される場所。

1. Googleなど、検索サイトでの検索結果ページ。
2. ブラウザのタブ。
3. ブラウザのお気に入り。
4. ブラウザの固有機能。(履歴一覧や各種固有機能でサイト一覧が表示される場合など。)
5. デバイスの固有機能。(スマホでホーム画面にサイトを追加登録した場合など。)

※ 各ブラウザやデバイスには、アイコンのユースケースごとにそれぞれ推奨される最適サイズが存在する。
※ 最適サイズのFaviconがサイトから提供されていない場合、ブラウザやデバイスが、提供された中から最適なサイズや形式のファイルを自動判定して使用する。

3. Faviconの標準化問題

• 現在でも、各ブラウザや検索サイトで採用されるFaviconのアイコンサイズやファイル形式に厳格な共通の規定は無い。
• W3Cの公式ドキュメント(HTML 4.01)にはFaviconについての記述はあるが、現行のHTML5はWebの構造やセマンティクスを標準化する仕様なので、付加的なリソースであるFaviconに関して明確な策定が無い。(必要に応じて関連仕様や「manifest.json」のような補助技術で定義するという流れになっている。)
• Faviconに使用可能なアイコン画像のファイル形式はブラウザによってサポートが異なる。
• 一般的に、ico、png、gif、svgのファイル形式がサポートされている。

※ Faviconのpng形式のブラウザ対応状況。(Can I Use)
※ Faviconのsvg形式のブラウザ対応状況。(Can I Use)

※ WekipediaのFaviconのページにあるブラウザ対応の一覧表。(Image file format support)

Faviconに関する公式な規定

1. W3Cの公式ドキュメント

[ W3CのFaviconの仕様概要 ]

W3Cの公式ドキュメント「How to Add a Favicon to your Site」に記載されているFaviconに関する仕様の概要。

• アイコン画像のフォーマットは、「png」か「gif」か「ico」のいずれか。(「png」がW3C標準の形式。)
• 画像サイズは「16×16 pixels」か「32×32 pixels」のどちらか。
• 色は「8-bit」(256色)か「24-bit」(256^3 = 16777216色)のどちらか。
• HTMLに「link」タグで「rel」属性は「rel=”icon”」と記述して任意のFavicon用のファイルを指定する。

※ 非推奨の方法として、WebサイトのルートディレクトリにFaviconファイルを配置すればブラウザが自動検知するという方法も記述されている。
※ HTML 4.01の策定(2005年)から更新されていない。(HTML5の仕様はない。)
※ 現行の主要ブラウザは、このW3Cの規定よりも柔軟に対応している。

[ 基本的な記述例 ]

W3C勧告のHTML 4.01の仕様に準拠した記述例。

//Faviconファイルがpng形式の場合
<link rel="icon" type="image/png" href="「任意のFaviconファイルのパス」">

2. Googleの公式ドキュメント

[ Google検索のFaviconの仕様概要 ]

Googleの公式ドキュメント「検索結果に表示されるファビコンを定義する」に記載されている仕様の概要。

※ Google検索の検索結果にFaviconを表示するための指定方法。

• Googleのガイドラインに沿ったアイコンを用意する必要がある。
• HTMLの「link」タグでFaviconファイルを指定する。
• 「link」タグの「href」属性の値は相対パス、絶対パスのどちらでも指定できる。
• 自サイトではなく、他のドメインのファイルパスでも指定できる。
• 後方互換のため、Googleは「rel=”shortcut icon”」の指定もサポートしている。
• ガイドラインのすべてに準拠していても、検索結果で必ずFaviconが表示されるとは限らない。

[ ガイドライン ]

• ひとつのホスト名に対してサポートされるFaviconはひとつだけ。
• ルートディレクトリとサブディレクトリは同じホスト名なので、同じFaviconしか設定できない。(サブディレクトリレベルのホームページのFaviconはサポートされない。)
• サブドメインは別のホスト名の扱いになるので、サブドメインごとにFaviconをそれぞれ設定できる。
• WebサイトとFaviconファイルをGoogle botがクロールできる状態が必要。(アクセスに認証が必要無い状態。)
• FaviconはWebサイトのブランドを視覚的に表したものとする。
• Faviconサイズは、「1:1」のアスペクト比で、「8×8ピクセル」以上の大きさが必要。(「48×48ピクセル」以上を推奨。)
• Faviconの形式として有効なファイルはすべてサポートされる。(公式ドキュメントにはWikipediaのリンクが提示されているだけで具体的な記載はない。)
• Faviconファイルのパスは頻繁に変更されず、固定されている必要がある。(おそらく、Faviconは基本的に変更されない前提なので再クロールの頻度が低いため。)
• わいせつな表現やヘイト表現に関連するシンボルなどの不適切なFaviconは表示されない。

3. Appleの公式ドキュメント

[ Webクリップの仕様概要 ]

Appleの公式ドキュメント「Configuring Web Applications」に記載されている「Webクリップ」の仕様の概要。

※ 「Webクリップ」と呼ばれるiOSの機能で、ユーザーが任意のWebサイトのリンクをデバイスのホーム画面に追加したときに使用されるアイコン画像(Favicon)の設定方法。

• HTMLの「link」タグで、「rel」属性は「rel=”apple-touch-icon”」と指定してFaviconファイルを設定する。
• 明確には言及されていないが、おそらく「Webクリップ」のFaviconとして設定できるのはpng形式のみ。
• 様々なAppleデバイスで異なる最適なアイコンサイズに細かく対応したい場合は、「link」タグの「sizes」属性を使用して複数併記することも可能。
• Faviconの「link」タグが複数記述されている場合、デバイスが適したサイズのFaviconファイルを自動判別して使用する。
• 適したサイズのFaviconファイルが設定れていない場合、適したサイズより小さい中で最大のFaviconファイルが使用される。
• 「link」タグが記述されていない場合、デバイスはWebサイトのルートディレクトリ内からファイル名が「apple-touch-icon」で始まるpngファイルを探し、存在すれば適用する。(「apple-touch-icon-80×80.png」、「apple-touch-icon.png」など。)

※ iOS7より古いiOSではアイコンに光沢表現が自動付加されたので、「link」タグで「rel=”apple-touch-icon-precomposed”」を指定した回避方法があったが現行のiOSでは必要無い。

[ アイコンサイズに関する規定 ]

• デバイス毎に「Webクリップ」に最適なアイコン画像のサイズは異なる。(公式ドキュメント「App icon sizes」を参照。)
• 最適な解像度のアイコンで対応したい場合は、対応したいすべてのサイズのアイコン画像ファイルを用意して「link」タグですべて併記する。
• App Store用に「1024×1024 px」のアイコン画像を用意して、それを元に各種の小さいサイズに縮小した画像を生成することを推奨している。

※ 現行の公式ドキュメント(最終更新は「June 10, 2024」)によると、iOSで使用されるアイコン画像の最大サイズは「180×180 px」。

[ 基本的な記述例 ]

「Webクリップ」用のFaviconファイル指定の記述例。

//基本的な記述方法
<link rel="apple-touch-icon" href="「任意のFaviconファイルのパス」">

//複数サイズのFaviconを提示したい場合は複数の「link」タグを併記
<link rel="apple-touch-icon" sizes="152x152" href="「152x152pxサイズのFaviconファイルのパス」">
<link rel="apple-touch-icon" sizes="167x167" href="「167x167pxサイズのFaviconファイルのパス」">
<link rel="apple-touch-icon" sizes="180x180" href="「180x180pxサイズのFaviconファイルのパス」">

4. ウェブアプリマニフェストの公式ドキュメント

Androidなどで採用されている「プログレッシブウェブアプリ(PWA : Progressive Web App)」に対応するための「ウェブアプリマニフェスト(Web Application Manifest)」の記述方法。

※ 「ウェブアプリマニフェスト」は、「プログレッシブウェブアプリ」と呼ばれるWeb技術の一部。

※ 「ウェブアプリマニフェスト」で指定したアイコン画像ファイルが「プログレッシブウェブアプリ」のFaviconとしてスマホのホーム画面追加や固有機能で使用される。

[ PWAの概要 ]

Mozillaの公式ドキュメント「プログレッシブウェブアプリとは」に記載されている「PWA」の概要。

• 「PWA」とは、HTML、CSS、JavaScriptなどの標準的なWebの技術で構築しているが、デバイスにインストールすることができ、ネイティブアプリのような挙動や使い勝手をサポートしているWebサイト・Webアプリのこと。
• 単純にデバイスのホーム画面やブックマークなどにリンクとアイコンを設置してWebサイトを開くような通常のWebアプリとは異なり、事前にリソースをダウンロードしてネイティブアプリのようにオフラインでも動作できる技術として設計されている。(ブラウザのオフラインキャッシュを利用している。)
• OS専用の通常のアプリとは異なり、標準的なWebの技術で構築されているので、単一のコードソースで様々な端末やOSで動作させることができる。
• Webから直接アクセスすることも、各OSのアプリストアから端末にインストールすることもできる。
• 「PWA」には、インストールするために必要な情報(アプリ名やアイコンなど)が記述された「ウェブアプリマニフェスト」ファイルが必須。
• インストールされた「PWA」は、ブラウザ上のWebサイトではなく、スタンドアロンアプリとして起動できる。
• インストールされた「PWA」は、通常のネイティブアプリのように、オフラインで動作、バックグランド更新、プッシュ通知などができる。
• インストールされた「PWA」は、ネイティブアプリのように全画面Uiで表示され、ブラウザーUIは表示されない。
• インストールされた「PWA」でも、通常のWebサイトと同じようにChromeやFirefoxのようなブラウザエンジンが動作を管理・実行している。

[ ウェブアプリマニフェストの仕様概要 ]

Mozillaの公式ドキュメント「ウェブアプリマニフェスト」と、W3Cの公式ドキュメント「Web Application Manifest」に記載されている「ウェブアプリマニフェスト」の仕様の概要。

• 「ウェブアプリマニフェスト」にJSONテキストファイルとして「PWA」の情報を記述する。
• アプリ名、作者、アイコン、バージョン、説明などの項目とその値を記述する。(項目の記述の順番は自由。)
• Chromiumベースのブラウザー(Google Chrome、Samsung Internet、Microsoft Edgeなど)に対応する場合、「ウェブアプリマニフェスト」に以下の項目が必要。
  (1) 「start_url」 : アプリを起動したときに読み込まれるべき推奨URL。(相対パスで記述した場合は、マニュフェストのパスがベースURLになる。)
  (2) 「name」または「short_name」 : アプリの名前。(ホーム画面でのアプリのラベルやアプリリストの一覧などで表示される。)
  (3) 「display」や「display_override」 : 推奨の表示モード。(画面にブラウザのUIを表示するかどうか。)
  (4) 「icons」 : アプリのアイコンに使用される画像ファイル。(オブジェクトの配列で記述。「192px」と「512px」のアイコンサイズは必須。)
  (5) 「prefer-related-application」は「false」または存在してはいけない。
• トラッキングに対するユーザーのプライバシーの観点から、「start_url」のURLにはクリエパラメーター(「?=任意の文字列」)やフラグメント識別子(「#任意の文字列」)を付加しないことが推奨されている。
• 「scope」の項目で指定したパス以下のディレクトリでのみ「ウェブアプリマニフェスト」が適用される。
• 「scope」の項目が無ければ「start_url」の項目の指定URL、「start_url」の項目も無ければアプリをインストールしたときのURLが「scope」として使用される。(特に理由が無ければ、「scope」には同一オリジン内のすべてを意味する「”/”」を設定する。)
• 「theme_color」などの項目で色指定をする場合、CSSの色指定ルールに従う。(CSS変数「–custom-color01」など他の情報が必要な指定方法は使用できない。)
• 「ウェブアプリマニフェスト」のjsonファイルには任意の名前を付けることができる。
• 「ウェブアプリマニフェスト」のjsonファイルの拡張子には「.json」や「拡張子無し」なども適宜使えるが、仕様書の例示では「.webmanifest」が使用されている。
• HTMLの「link」タグで「rel」属性は「rel=”manifest”」と指定し、「href」属性に「ウェブアプリマニフェスト」のjsonファイルを設定する。

[ アイコンに関する仕様 ]

• ユーザーエージェントはプラットフォームの表示に視覚的に合致するようにアイコン画像のリソースを改変することが許可されている。(切り抜きや塗りつぶしなど。)
• アイコン画像は、矩形1辺の80%の長さを直径とする円の中をセーフゾーンとしてデザインすることが推奨される。(中心から円型に切り抜かれて使用される場合があるため。)
• 「ウェブアプリマニフェスト」の「icons」の項目は、「src」のみが必須で他は任意のオプション。
• 「src」の値のURLが相対パスで記述されている場合、「ウェブマニフェストのファイルのパス」からの相対パスとなる。
• 「ウェブマニフェストのファイルのパス」と異なるドメインに配置されているアイコン画像ファイルは設定できない。
• 「icons」の項目に「sizes」でアイコン画像のサイズ「横幅x縦幅」が指定できる。
• 「sizes」の値は、複数のサイズが含まれるマルチアイコンの場合に「半角スペース」を空けて複数のサイズを指定できる。(svg形式ですべてのサイズに対応できる場合は「any」と記述。)
• 「icons」の項目に「type」で指定ファイルのMIMEタイプが提示されていなければ、リソースへのアクセス時に自動判別される。
• 「icons」の項目には「purpose」(アイコンの使用用途)が設定できる。
• 「purpose」に指定できる値は以下の3つ。(半角スペースで区切って1つ以上の値を複数記述できる。)
  (1) 「monochrome」 : アルファ値以外の色情報を破棄して単一色で表示することができる。
  (2) 「maskable」 : セーフゾーンの外側を切り抜いたりマスクしたりなどして表示することができる。
  (3) 「any」 : 他の「purpose」(「monochrome」、「maskable」)が要求されない場所では自由にアイコンを表示することができる。
  ※「any」が既定値。
• 「monochrome」対応用のアイコン画像を用意する場合は、透過と黒のみでデザインすることが推奨される。

[ 基本的な記述例 ]

1. HTMLでの「ウェブアプリマニフェスト」ファイルの読み込みの記述例。

<link rel="manifest" href="/manifest.webmanifest">

2. 基本的な「ウェブアプリマニフェスト」ファイルの内容の記述例。

※ 「”icons”」の「”src”」の値に指定するURLは、「ウェブアプリマニフェスト」ファイルのパスがベースURLになる。(下記の例の場合、「manifest.webmanifest」のファイルと同じ階層に「icon」フォルダが配置されていることになる。)

{
 "lang": "ja",
 "dir": "ltr",
 "start_url": "https://memo.ag2works.tokyo/",
 "scope": "/",
 "display": "fullscreen",
 "name": "memo メモ [AG2WORKS]",
 "short_name": "AG2WORKS",
 "theme_color": "#9bbfc7",
 "background_color": "#f9f9f6",
 "icons": [{
  "src": "/icon/icon192.png",
  "sizes": "192x192",
  "type": "image/png"
 }, {
  "src": "/icon/icon512.png",
  "sizes": "512x512",
  "type": "image/png"
 }]
}

現在は使用されていない記述

現在は非推奨となり、ブラウザに無視される古い記述方法。

1. 「rel=”shortcut icon”」

現在は「rel=”icon”」という指定方法に移行しているので使用しない。

• Faviconとしてicoファイルを設定するときの、かつての一般的な「rel」属性の指定方法。
• Google検索など、後方互換のためにサポートされている場合もある。

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

2. 「rel=”mask-icon”」

現在は使用されていない。

• 古いバージョンのSafariのピン留めされたタブ用のFavicon指定に使用されていた。

<link rel="mask-icon" href="/favicon.ico">

3. 「rel=”apple-touch-icon-precomposed”」

現在は使用されていない。

• iOS7より古いiOSで、ホーム画面に登録したアイコンに光沢表現が付与されてしまうのでその対策で使用されていた。

<link rel="apple-touch-icon-precomposed" href="/favicon.png">

汎用的なFavicon指定の記述

個人的に最低限必要な対応をするための汎用的なFaviconの指定記述。

[ 用意するアイコン画像のサイズと形式 ]

• 「32×32ピクセル」のico形式。
• 「180×180ピクセル」、「192×192ピクセル」、「512×512ピクセル」のpng形式。
• svg形式。

[ HTMLの記述 ]

• png形式やsvg形式に対応していない環境や小さいサイズが必要な環境用に「32×32ピクセル」のico形式のFaviconファイルを設置。(一般的なブラウザタブでのFaviconの表示サイズ「16×16ピクセル」の2倍の解像度。)
• svg形式に対応していない環境用に「512×512ピクセル」のpng形式のFaviconファイルを設置。(「ウェブマニフェスト」に必須サイズなので新たなサイズを生成する必要が無く、高解像度にも対応できるので。)
• ベクター画像のsvg形式のFaviconファイルを「sizes=”any”」として設置。
• 対応している環境ならsvg形式を優先したいので「rel=”icon”」の中で一番下にsvg形式を記述。(適切なアイコンの中で、より下の記述が優先される。)
• iOS用に「180×180ピクセル」のpng形式のFaviconファイルを設置。(現行のiOSで要求されている最大のアイコンサイズだけ対応。)
• PWA対応のために「ウェブマニフェスト」ファイルを設置。

※ すべてのアイコンサイズで厳密に対応したい場合は、各OSやブラウザの公式ドキュメントを参照して必要なすべてのサイズを調べ、すべてのサイズの画像ファイルを作成して「link」タグを記述する必要がある。

<link rel="icon" sizes="16x16 32x32" href="「ico形式のFaviconファイルのパス」">
<link rel="icon" type="image/png" sizes="512x512" href="「512x512pxサイズのpng形式のFaviconファイルのパス」">
<link rel="icon" type="image/svg+xml" sizes="any" href="「svg形式のFaviconファイルのパス」">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="「180x180pxサイズのpng形式のFaviconファイルのパス」">
<link rel="manifest" href="「ウェブマニフェストのファイルのパス」">

[ ウェブマニフェストの記述 ]

• 最低限必要な「start_url」、「name」、「display」、「icons」を記述。(他は任意。)
• 対応している環境用ではsvg形式のアイコンを使用したいので「”sizes”: “any”」で最初に記述。(記述順に評価されるので。)
• 必須のアイコンサイズの「192×192」と「512×512」のpng形式を記述。(「scr」は「ウェブマニフェストのファイルのパス」からの相対パスで記述。)

※ ブラウザの開発者ツールにある「アプリケーション」 > 「Manifest」で正しく反映されているか確認できる。

{
 "start_url": "https://memo.ag2works.tokyo/",
 "name": "memo メモ [AG2WORKS]",
 "short_name": "AG2WORKS",
 "theme_color": "#9bbfc7",
 "background_color": "#f9f9f6"
 "scope": "/",
 "display": "fullscreen",
 "icons": [{
  "src": "「svg形式のFaviconファイルのパス」",
  "type": "image/svg+xml",
  "sizes": "any",
  "purpose": "any maskable"
 }, {
  "src": "「192x192pxサイズのpng形式のFaviconファイルのパス」",
  "type": "image/png",
  "sizes": "192x192",
  "purpose": "any maskable"
 }, {
  "src": "「512x512pxサイズのpng形式のFaviconファイルのパス」",
  "type": "image/png",
  "sizes": "512x512",
  "purpose": "any maskable"
 }]
}

• 2025年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには3種類のファイルが必要
• ウェブアプリ マニフェストを追加する