Favicon Standard - 2019 - svg、ico、pngおよび寸法
2019年現在、どのファビコンの寸法、ファイルフォーマット、メタ/リンクタグを使用すべきですか？これには、アップルのアイコン、ウィンドウズ、アンドロイド、その他の人々が今日使うデバイスが含まれます。
私はOperaを使っていて、svgフォーマットをサポートしていることがわかります。最近svgを使用するのが最善の解決策ですか？ 「1つのファイルがすべてに収まる」というオプションはありますか？
私は多くのWebサイトを閲覧していて、さまざまな "favicon generator"をチェックしています。それらはすべて年をとっていて、主に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によって生成されたものと一致していても驚かないでください。
万能の神話
「フリーサイズ」アイコンはありません。あなたは一つのSVGアイコンを作成することはできず、それが至るところで機能すると期待することはできません。
技術的な観点からは、1つのSVGアイコンがいいでしょう。しかし、UIとUXの観点からは、これは望ましい結果ではありません。 iOSとAndroidを比較してください。 iOSでは、すべてのホームスクリーンアイコンは角が丸い四角形です（ iOSはタッチアイコンの透明領域を黒で塗りつぶします ）。 Androidでは、ホームスクリーンのアイコンは正方形以外の形状と透明度（Googleのアプリアイコンを含む）を使用することがよくあります。ワンタッチアイコンを送信するとAndroid Chromeがそれを使用します。しかし、あなたは Androidアイコンのガイドライン と一致させることはできませんが、専用のアイコンは一致させることができます。
だから私は故意に一つのアイコンを使うのを避けるように忠告します。可能であれば、各プラットフォームを個別にターゲットにしてください（これは必ずしもそうとは限りません）。
アイコン、プラットフォームごとのプラットフォーム
iOS Safari
iOS Safariでは、 タッチアイコン が必要です。今日の時点で、これは180 x 180のPNG画像です。この画像は透明度を使用しないでください。ホーム画面に追加されると、その角は自動的に丸められます。宣言された：
<link rel="Apple-touch-icon" sizes="180x180" href="/icons/Apple-touch-icon.png">
長年にわたり、このアイコンは多くのブラウザにとって「デフォルトの高解像度アイコン」となっています。ブックマークなどに追加すると、他の場所に表示されます。
Android Chrome
Android Chromeは Webアプリマニフェスト に依存しています。このマニフェストはAndroid Chrome専用ではありませんが、現在その主な支持者です。そのため、現時点では、Web App ManifestのアイコンをAndroid Chrome用にすることを検討してもまだ安全です。
その名前が示すように、Web App Manifestは、Webアプリケーション向けです。しかし、どのWebサイトでも、いくつかのアイコンを参照する方法としてそれを使用できます。
Androidは192x192のPNGアイコン、透明度が許可され、奨励されることを期待しています。
マニフェストは次のように宣言されています。
<link rel="manifest" href="/icons/site.webmanifest">
macOS Safari
MacOS Safariにはfaviconがありませんが、固定タブ用の マスクアイコンをサポートしています 。これは単色のSVGアイコンで、タブがアクティブなときに塗りつぶされる単色です。
それを宣言します。
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
エッジとIE 12
Microsoftは browserconfig を導入しました。これはMetro UIに合うさまざまなアイコンをリストしたXML文書です。
ファイルと 背景色 は次のように宣言されます。
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
古典的なデスクトップブラウザ
Windows/macOS Chrome、Windows/macOS Firefox、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">
他のブラウザ
他のブラウザには専用のアイコンがあります。例えば Opera by Coastは228 x 228のアイコン を探しています。これらのブラウザに集中する必要性は明白ではありません。彼らが「自分の」アイコンを見つけることができないとき、彼らは通常タッチアイコンまたは他のアイコンを使います。
結論
冒頭で発表したように、これはまさに RealFaviconGenerator が作成するものです。
また、faviconと一緒に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">
私は多くのユーザーが650pxとjpg/pngフォーマットで1300pxの画像を作ることを発見しました。
すべてのタグを追加した後、それらを検証する必要があります 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カードで似たような画像を保存するには、サイズ1240ピクセルx 650ピクセルおよびjpg/png形式をお勧めします。 FacebookとTwitterはSVGを受け付けていません...
私は、いくつかのグローバルブランドが彼らのウェブサイトでこのタグを使っていることを知りました。 1つは150×150ピクセルとPNG形式のサイズでした。この画像は、検索結果に表示するためにブラウザによって使用されることがあります。
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon GeneratorはMicrosoftのfaviconもカバーしています。ページを最適化するためのMSアプリケーション用の他の多くのメタタグがあり、画像などの他の情報が表示されます。このトピックも読む価値があります。
私はこれが誰かに役立つことを願っていて、あなたのウェブサイトのブランディングの話題を広げています。