質問

2022年現在、どのようなファビコンの寸法、ファイル形式、メタ/リンクタグを使用すべきなのか？これには、アップル・アイコン、ウィンドウズ、アンドロイド、その他今日人々が使用しているデバイスが含まれます。

私はオペラを使っていますが、svg形式に対応しているのがわかります。現在、svgを使用するための最良の解決策でしょうか？1つのファイルですべてに対応するオプションはありますか？

私は多くのウェブサイトを閲覧し、さまざまなファビコンジェネレータをチェックしました。どれも何年も前のもので、主にpngファイルで動作します。

例えば icoとsvgはどのようなコードにすればよいのでしょうか？

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

それとも、icoにもっと多くのサイズが含まれている場合は、dimensionsを指定する必要があるのでしょうか？良い答えが見つかりませんでした。

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

使用するファビコンの寸法、ファイル形式、メタ/リンクタグをお知らせください。

解決するには？

免責事項：私はRealFaviconGeneratorの作者であり、最新であることを期待しています（ほとんど、以下を参照ください）。ですから、この回答がRPGが生成するものと一致しても驚かないでください。

ワンサイズ・神話

ワンサイズ上のアイコンは存在しません。1つのSVGアイコンを作成すれば、それがどこでも通用すると期待することはできません。

技術的な観点からは、SVGアイコンを1つにすることは良いことでしょう。しかし、UIやUXの観点から見ると、これは望ましい結果ではありません。iOSとAndroidを比べてみてください。iOSでは、ホーム画面のアイコンはすべて角が丸い四角形です( iOSはTouchアイコンの透明な領域を黒で塗りつぶす ). Androidでは、ホーム画面のアイコンは正方形でない形や透明なものがよく使われます（Googleアプリのアイコンを含む）。単一のタッチアイコンを提出すると、Android Chrome がそれを使用します。しかし、以下のようなマッチングができません。 Androidアイコンガイドライン 専用のアイコンであれば可能です。

だから、あえて一つのアイコンを使うのは避けた方がいいと思います。可能であれば、各プラットフォームを個別にターゲットにすることをお勧めします（常にそうであるとは限りません）。

アイコン、プラットフォームごとに

iOSのサファリ

iOSのSafariは タッチアイコン . 今日現在、これは 180x180 の PNG 画像です。この画像は透明度を使用せず、ホーム画面に追加されたときに自動的に角が丸くなるようにします。と宣言されています。

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

長年にわたり、このアイコンは多くのブラウザのデフォルト高解像度アイコン"になっています。そのため、ブックマークに追加する際など、他の場所でもこのアイコンを見つけることができます。

アンドロイドクローム

Android Chromeは ウェブアプリマニフェスト . このマニフェストは Android Chrome 専用ではありませんが、現在のところ Android Chrome の主な支持者となっています。そのため、現時点ではまだ、Web App ManifestからのアイコンはAndroid Chromeのためのものであると考えるのが無難でしょう。

Web App Manifestは、その名の通り、Webアプリケーションのためのものです。しかし、どのようなWebサイトでも、アイコンを参照する方法として使用することができます。

Androidは192x192のPNGアイコンを想定しており、透明度も許容・推奨されています。

でマニフェストを宣言します。

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

EdgeとIE 12

マイクロソフトが導入した ブラウザコンフィグ メトロUIに適合する様々なアイコンを列挙したXML文書です。

このファイルと 背景色 で宣言されています。

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

デスクトップ用クラシックブラウザ

Windows/macOSのChrome、Windows/macOSのFirefox、Safari、IE...。ここが少し曖昧なところです。歴史的に見ると favicon.ico ファイルは、現在もサポートされています。しかし、最近のブラウザは、より軽いPNGアイコンを選ぶようになっています。また、一部のブラウザでは、ICOファイル内の適切なアイコンを選択できないため（この形式では複数のバージョンのアイコンを埋め込むことができます）、低解像度のアイコンが誤って使用されることがあります。

従来の favicon.ico を完全に削除しました。RFGでこの飛躍を実現したいのですが、古いブラウザへの影響を評価するために必要なテストは行っていません。

したがって、私が現在も推奨するコンボである favicon.ico 16x16、32x32、48x48のアイコンを埋め込むことができます。

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

その他のブラウザー

他のブラウザでは、専用のアイコンが用意されている場合があります。例えば Coast by Opera は 228x228 のアイコンを探しています。 . これらのブラウザに注目する必要性は明白ではありません。彼らは通常、"our"アイコンが見つからない場合、タッチアイコンや他のアイコンを使用します。

まとめ

冒頭でお知らせしたように、まさにこれが RealFaviconGenerator を作成します。