2020年現在、どのファビコンディメンション、ファイル形式、メタ/リンクタグを使用する必要がありますか？これには、今日使用されているアップルのアイコン、Windows、Androidなどのデバイスが含まれます。

Operaを使用していますが、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にさらにサイズが含まれている場合は、寸法を指定する必要がありますか？良い答えは見つかりませんでした。

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

使用するファビコンの寸法、ファイル形式、メタ/リンクタグを入力してください。

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

万能の神話

「1つのサイズですべてに対応」アイコンはありません。単一のSVGアイコンを作成して、どこでも機能することを期待することはできません。

技術的な観点からは、単一のSVGアイコンで十分です。しかし、UIとUXの観点からは、これは望ましい結果ではありません。iOSとAndroidを比較します。iOSでは、すべてのホーム画面アイコンは角が丸い四角形です（iOSはタッチアイコンの透明な領域を黒で塗りつぶします）。Androidでは、ホーム画面のアイコンは非正方形の形状と透明度を使用することがよくあります（Googleアプリのアイコンを含む）。シングルタッチアイコンを送信すると、Android Chromeで使用されます。ただし、Androidアイコンのガイドラインに適合させることはできませんが、専用のアイコンは適合させることができます。

したがって、1つのアイコンの使用は意図的に避けることをお勧めします。可能であれば、各プラットフォームを個別にターゲットにします（常にそうであるとは限りません）。

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

iOSサファリ

iOS Safariはタッチアイコンを想定しています。現在のところ、これは180x180のPNG画像です。この画像は透明度を使用しないでください。ホーム画面に追加されると、その角は自動的に丸められます。宣言者：

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

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

Android Chrome

Android ChromeはWebアプリマニフェストに依存しています。このマニフェストはAndroid Chrome専用ではありませんが、現在、その主要なサポーターです。そのため、現時点では、WebアプリマニフェストのアイコンをAndroid Chromeであると見なすことは、依然として非常に安全です。

名前が示すように、WebアプリマニフェストはWebアプリ向けです。しかし、どのWebサイトでも、一部のアイコンを参照する方法としてこれを使用できます。

Androidは、192x192のPNGアイコン、透明性が許可および推奨されることを期待しています。

マニフェストは次のように宣言されます。

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

EdgeとIE 12

Microsoftは、metro UIに適合するさまざまなアイコンを一覧表示するXMLドキュメントであるbrowserconfigを導入しました。

ファイルと背景色は次のように宣言されます：

<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.ico16 x 16、32 x 32、および48 x 48のアイコンを埋め込んだ、今日でも私が推奨するコンボ：

<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">

その他のブラウザ

他のブラウザには専用のアイコンがある場合があります。たとえば、Oast by Operaは228x228のアイコンを探しています。これらのブラウザに焦点を合わせる必要性は明白ではありません。彼らは通常、「自分の」アイコンが見つからない場合に、タッチアイコンまたは他のアイコンを使用します。

結論

最初に発表したように、これはまさにRealFaviconGeneratorが作成するものです。

ファビコンと一緒に、OGタグ、Twitterカード、MSアプリケーションなどの他のタグを追加する必要があることにも言及する価値があります。それはすべて同じ目的を果たします-ブランドの視覚的識別であり、これも含める必要があります。

Twitterカードはこちら

次のタグを追加します

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

多くのユーザーが1300px x 650pxおよびjpg / png形式の画像を作成していることがわかりました。

すべてのタグを追加した後、彼らは検証する必要がありHERE

Facebook OGにはより多くのオプションがありますが、一般的には次のとおりです。

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebookは画像の特定の比率を推奨し、ファイルサイズは8Mbに制限されています。Twitterカードで同様の画像を保持するには、1240px×650pxのサイズとjpg / png形式をお勧めします。FacebookとTwitterはSVGを受け入れません...

一部のグローバルブランドがこのタグをウェブサイトで使用していることがわかりました。1つは150x150ピクセルの寸法でpng形式です。この画像は、ブラウザが検索結果に表示するために使用できます。

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon GeneratorはMicrosoftのファビコンもカバーしています。MSアプリケーションがページを最適化するための他の多くのメタタグがあり、画像などの他の情報が表示されます。このトピックも読む価値があります。

これが誰かにとって有用であり、あなたのウェブサイトのブランディングのトピックを広げることを願っています。