SVGファビコンを使用する必要があります。それらはすべての最新のブラウザでサポートされています（まあ、ほとんどすべて）。
さらに、プロジェクトからプロジェクトにコピーするアイコンや寸法への参照がすべて必要なわけではありません。これに必要な絶対最小値を調べてみましょう。
アイコン
メインのフィビコンは、任意のサイズのSVGにすることができます。タイプはtype="image/svg+xml"
必要あり ません。
<link rel="icon" href="favicon.svg">
アイコンマスク
Safari, . mask-icon
. SVG, . .
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
(Touch Icon)
IOS , . 180 x 180
, sizes .
manifest.json
- -. Lighthouse.
Android Chrome. 512 x 512.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
theme-color
meta
- Chrome Android.
<meta name="theme-color" content="#ffffff">
, , . msapplication-TileImage
, Windows, apple-touch-icon
. TileColor .
, , , favicon.ico
32 x 32
-. , .
結論として、ここにダークモードのヒントがあります。SVGアイコンの利点の1つは、CSSを使用して色を変更できることです。メディアクエリを使用する場合prefers-color-scheme
、アイコンの色はユーザーのダークモードまたはライトモードに応じて変わります。mask-icon
属性で色が指定されているため、このメソッドは機能しませんが、十分なコントラストがない場合、Safariは白い背景を追加します。
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
結果
これが最終結果です。それを<head>
あなたのウェブサイトにコピーしてfavicon.ico
、ルートに置くことを忘れないでください。
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">