faviconの設定

faviconにはicoファイルが推奨されていますが、実はpngやsvgでも設定できます。
しかもsvgファイルであれば、ダークモードの設定も可能です。
IE未対応ですが、pngファイルを代替えで設定すれば大丈夫のようです。

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

ただし、ダークモード、safariでは単色でしか使えません。
またsafariでは mask-icon を設定し背景の透明な画像を用意する必要があります。

ダークモードに利用したい場合はsvgをテキストエディタで開き
ダークモード時のカラーを指定します。

<style>
　　path {
    　　fill: #000;
    }
    @media (prefers-color-scheme: dark) {
        path {
          fill: #fff;
        }
     }
 </style>

safari用とWeb Clipアイコン（サイズ：180X180）等を設定したコード

<link rel="icon alternate" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="mask-icon" sizes="any" href="images/favicon.svg" color="#000">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

その他、icoファイルの作り方、Web Clipアイコン等、必要な設定方法など
詳しくこちらのサイトに記載がありますので、詳しく知りたい方はご確認ください。