☰

ファビコン標準 - 2024 - svg、ico、png、寸法? [重複] 質問する

tag-icon • tag-icon html svg png favicon
ファビコン標準 - 2024 - svg、ico、png、寸法? [重複] 質問する

2022 年現在、どのようなファビコンのサイズ、ファイル形式、メタ/リンク タグを使用する必要がありますか? これには、Apple アイコン、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">

使用するファビコンのサイズ、ファイル形式、メタ/リンク タグを指定してください。

ベストアンサー1

免責事項: 私は RealFaviconGenerator の作者であり、このバージョンは最新のものであると期待しています (ほとんど、下記参照)。したがって、この回答が RFG が生成したものと一致しても驚かないでください。

万能の神話

「万能」なアイコンは存在しません。単一の SVG アイコンを作成しても、それがどこでも機能するとは期待できません。

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

したがって、意図的に単一のアイコンを使用しないようにすることをお勧めします。可能であれば、各プラットフォームを個別にターゲットにしてください (常にそうであるとは限りません)。

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

iOSサファリ

iOS Safariはタッチアイコン現時点では、これは 180x180 の PNG 画像です。この画像には透明度を使用しないでください。ホーム画面に追加されると、角は自動的に丸くなります。次のように宣言します。

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

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

Android クローム

Android Chromeはウェブアプリマニフェストこのマニフェストは Android Chrome 専用ではありませんが、現在は Android Chrome の主なサポートとなっています。そのため、現時点では、Web アプリ マニフェストのアイコンは Android Chrome 用であると考えても問題ありません。

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

Android では、192 x 192 の PNG アイコンが想定されており、透明度が許可され、推奨されています。

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

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

エッジとIE12

マイクロソフトは、ブラウザ設定Metro UI に適合するさまざまなアイコンをリストした XML ドキュメント。

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

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

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

Windows/macOS Chrome、Windows/macOS Firefox、Safari、IE... ここでは状況が少し不明確です。歴史的には、1 つの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のアイコンを探していますこれらのブラウザに重点を置く必要性は明らかではありません。通常、ユーザーは「自分の」アイコンが見つからないときに、タッチ アイコンまたは他のアイコンを使用します。

結論

冒頭で述べたように、これはまさにリアルファビコンジェネレータ作成します。

おすすめ記事