faviconについて個人的まとめ

<link rel="icon" type="image/png" href="faviconのアドレス" />

<link rel="icon" href="SVGファイルのパス" sizes="サイズxサイズ" />
の形でfaviconを指定して確認した。
favicon.icoは配置していない。

<link rel="icon" href="PNGファイルのパス" sizes="サイズxサイズ" />
の形でfaviconを指定して確認した。
favicon.icoは配置していない。

<link rel="apple-touch-icon" href="PNGファイルのパス" sizes="サイズxサイズ" />
の形でfaviconを指定して確認した。
favicon.icoは配置していない。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" zoomAndPan="magnify"
     viewBox="0 0 384 383.999986" height="512" preserveAspectRatio="xMidYMid meet" version="1.0">
    <style>
        <!-- ライトモード -->
        path.base-color {
            fill: #cb6cbe;
        }
        g.text-color {
            fill: #6ccb79;
        }

        <!-- ダークモード -->
        @media (prefers-color-scheme: dark) {
            path.base-color {
                fill: white;
            }
            g.text-color {
                fill: white;
            }
        }
    </style>
    <defs>
        <g/>
        <clipPath id="2e6b6e900a">
            <path d="M 23.25 52.347656 L 360.75 52.347656 L 360.75 279 L 23.25 279 Z M 23.25 52.347656 "
                  clip-rule="nonzero"/>
        </clipPath>
        <clipPath id="e85a71835d">
            <path d="M 92 311 L 292 311 L 292 331.347656 L 92 331.347656 Z M 92 311 " clip-rule="nonzero"/>
        </clipPath>
    </defs>
    <g clip-path="url(#2e6b6e900a)">
        <path class="base-color"
              d="M 346.023438 232.0625 L 37.976562 232.0625 L 37.976562 68.5 C 37.976562 67.769531 38.574219 67.183594 39.304688 67.183594 L 344.703125 67.183594 C 345.425781 67.183594 346.023438 67.769531 346.023438 68.5 Z M 225.765625 263.753906 C 224.183594 265.335938 221.988281 266.324219 219.566406 266.324219 L 164.433594 266.324219 C 159.589844 266.324219 155.660156 262.386719 155.660156 257.542969 C 155.660156 255.117188 156.640625 252.925781 158.234375 251.339844 C 159.816406 249.75 162.011719 248.769531 164.433594 248.769531 L 219.566406 248.769531 C 224.410156 248.769531 228.339844 252.695312 228.339844 257.542969 C 228.339844 259.964844 227.359375 262.160156 225.765625 263.753906 Z M 344.703125 52.449219 L 39.304688 52.449219 C 30.449219 52.449219 23.246094 59.65625 23.246094 68.5 L 23.246094 262.800781 C 23.246094 271.648438 30.449219 278.855469 39.304688 278.855469 L 344.703125 278.855469 C 353.550781 278.855469 360.753906 271.648438 360.753906 262.800781 L 360.753906 68.5 C 360.753906 59.65625 353.550781 52.449219 344.703125 52.449219 "
              fill-opacity="1" fill-rule="nonzero"/>
    </g>
    <path class="base-color"
          d="M 223.917969 257.542969 C 223.917969 258.707031 223.460938 259.804688 222.644531 260.628906 C 221.820312 261.449219 220.730469 261.90625 219.566406 261.90625 L 164.433594 261.90625 C 162.035156 261.90625 160.082031 259.945312 160.082031 257.542969 C 160.082031 256.378906 160.53125 255.289062 161.363281 254.457031 C 162.179688 253.640625 163.269531 253.1875 164.433594 253.1875 L 219.566406 253.1875 C 221.964844 253.1875 223.917969 255.140625 223.917969 257.542969 "
          fill-opacity="1" fill-rule="nonzero"/>
    <g clip-path="url(#e85a71835d)">
        <path class="base-color"
              d="M 291.257812 331.515625 L 92.75 331.515625 C 96.691406 319.957031 107.660156 311.621094 120.535156 311.621094 L 263.472656 311.621094 C 276.355469 311.621094 287.316406 319.957031 291.257812 331.515625 "
              fill-opacity="1" fill-rule="nonzero"/>
    </g>
    <path class="base-color"
          d="M 229.785156 306.285156 L 154.222656 306.285156 L 161.652344 284.1875 L 222.351562 284.1875 L 229.785156 306.285156 "
          fill-opacity="1" fill-rule="nonzero"/>
    <g class="text-color" fill-opacity="1">
        <g transform="translate(59.468757, 165.6761)">
            <g>
                <path d="M 0.78125 -30.171875 L 18.40625 -31.203125 L 19.390625 -24.421875 C 17.109375 -20.929688 15.835938 -17.117188 15.578125 -12.984375 C 15.484375 -11.816406 15.675781 -10.695312 16.15625 -9.625 C 16.644531 -8.550781 17.410156 -7.734375 18.453125 -7.171875 C 19.492188 -6.617188 20.597656 -6.332031 21.765625 -6.3125 C 22.941406 -6.300781 24.050781 -6.570312 25.09375 -7.125 C 26.132812 -7.675781 26.847656 -8.503906 27.234375 -9.609375 C 27.628906 -10.722656 27.8125 -11.847656 27.78125 -12.984375 C 27.78125 -18.191406 26.53125 -23.0625 24.03125 -27.59375 L 26.8125 -33.59375 C 30.519531 -31.414062 34.519531 -29.882812 38.8125 -29 C 42.269531 -28.21875 45.804688 -27.878906 49.421875 -27.984375 L 49.21875 -19 C 46.414062 -18.925781 43.679688 -19.265625 41.015625 -20.015625 C 38.210938 -20.503906 35.546875 -21.367188 33.015625 -22.609375 C 33.859375 -21.109375 34.488281 -19.519531 34.90625 -17.84375 C 35.332031 -16.164062 35.628906 -14.484375 35.796875 -12.796875 C 36.023438 -10.160156 35.492188 -7.691406 34.203125 -5.390625 C 32.921875 -3.097656 31.113281 -1.332031 28.78125 -0.09375 C 26.457031 1.144531 23.992188 1.710938 21.390625 1.609375 C 19.203125 1.609375 17.082031 1.175781 15.03125 0.3125 C 12.988281 -0.550781 11.378906 -1.925781 10.203125 -3.8125 C 9.035156 -5.695312 8.4375 -7.765625 8.40625 -10.015625 C 8.144531 -14.566406 9.003906 -18.894531 10.984375 -23 L 1.421875 -22.21875 Z M 33.546875 -33.40625 L 34.578125 -41.796875 L 38.375 -41.265625 L 37.453125 -32.765625 Z M 40.140625 -33.109375 L 41.359375 -41.703125 L 45.265625 -41.265625 L 44.234375 -32.421875 Z M 40.140625 -33.109375 "/>
            </g>
        </g>
    </g>
    <g class="text-color" fill-opacity="1">
        <g transform="translate(119.460935, 165.6761)">
            <g>
                <path d="M 5.671875 -36.765625 L 13.625 -36.234375 C 12.90625 -31.929688 12.398438 -27.613281 12.109375 -23.28125 C 11.816406 -18.957031 11.898438 -14.648438 12.359375 -10.359375 L 15.921875 -12.15625 L 17.671875 -7.125 C 18.160156 -8.945312 19.117188 -10.460938 20.546875 -11.671875 C 21.984375 -12.878906 23.585938 -13.765625 25.359375 -14.328125 C 27.140625 -14.898438 28.972656 -15.234375 30.859375 -15.328125 C 30.734375 -16.921875 30.601562 -18.390625 30.46875 -19.734375 L 18.40625 -19.046875 L 17.828125 -25.296875 L 29.6875 -25.984375 L 29.109375 -31.390625 L 18.40625 -30.71875 L 17.828125 -36.96875 L 38.484375 -38.421875 L 37.796875 -40.625 L 41.609375 -41.265625 L 43.796875 -34.234375 L 40.28125 -33.6875 L 40.375 -32.234375 L 36.8125 -31.9375 L 37.203125 -26.421875 L 46 -26.953125 L 46.390625 -20.65625 L 37.703125 -20.171875 C 37.796875 -18.640625 37.890625 -16.878906 37.984375 -14.890625 C 41.992188 -14.304688 45.9375 -13.425781 49.8125 -12.25 L 46.78125 -4.78125 C 43.914062 -5.820312 41.019531 -6.769531 38.09375 -7.625 C 38.09375 -5.726562 37.992188 -4.082031 37.796875 -2.6875 C 37.398438 -0.570312 36.394531 1.140625 34.78125 2.453125 C 33.175781 3.773438 31.316406 4.488281 29.203125 4.59375 C 27.347656 4.71875 25.507812 4.453125 23.6875 3.796875 C 21.863281 3.148438 20.410156 2.035156 19.328125 0.453125 C 18.253906 -1.117188 17.6875 -2.878906 17.625 -4.828125 L 6.25 1.265625 C 5.207031 -2.835938 4.53125 -7.019531 4.21875 -11.28125 C 3.914062 -15.539062 3.875 -19.800781 4.09375 -24.0625 C 4.320312 -28.332031 4.847656 -32.566406 5.671875 -36.765625 Z M 31 -4.390625 C 31.132812 -5.628906 31.1875 -7.175781 31.15625 -9.03125 C 30.46875 -9 29.804688 -8.96875 29.171875 -8.9375 C 28.535156 -8.90625 27.890625 -8.78125 27.234375 -8.5625 C 26.585938 -8.351562 26.085938 -7.972656 25.734375 -7.421875 C 25.378906 -6.867188 25.203125 -6.25 25.203125 -5.5625 C 25.035156 -4.59375 25.21875 -3.679688 25.75 -2.828125 C 26.289062 -1.984375 27.113281 -1.609375 28.21875 -1.703125 C 28.644531 -1.773438 29.101562 -1.890625 29.59375 -2.046875 C 30.082031 -2.210938 30.421875 -2.519531 30.609375 -2.96875 C 30.804688 -3.425781 30.9375 -3.898438 31 -4.390625 Z M 45.703125 -34.71875 L 43.75 -41.890625 L 47.515625 -42.625 L 49.8125 -35.359375 Z M 45.703125 -34.71875 "/>
            </g>
        </g>
    </g>
    <g class="text-color" fill-opacity="1">
        <g transform="translate(179.453114, 165.6761)">
            <g>
                <path d="M 9.8125 -40.671875 L 8.5 -32.171875 L 30.375 -30.671875 L 31.453125 -38.578125 Z M 3.8125 -20.703125 L 5.171875 -12.203125 C 6.347656 -12.828125 7.546875 -13.40625 8.765625 -13.9375 C 9.984375 -14.476562 11.226562 -15.007812 12.5 -15.53125 C 13.769531 -16.050781 15.019531 -16.554688 16.25 -17.046875 C 17.488281 -17.535156 18.8125 -17.875 20.21875 -18.0625 C 21.0625 -18.132812 21.921875 -18.019531 22.796875 -17.71875 C 23.679688 -17.425781 24.34375 -16.878906 24.78125 -16.078125 C 25.21875 -15.285156 25.375 -14.453125 25.25 -13.578125 C 25.019531 -11.953125 24.546875 -10.429688 23.828125 -9.015625 C 23.109375 -7.597656 22.328125 -6.210938 21.484375 -4.859375 C 20.640625 -3.503906 19.742188 -2.191406 18.796875 -0.921875 C 17.859375 0.347656 16.867188 1.597656 15.828125 2.828125 L 24.703125 5.078125 C 26.398438 3.421875 27.945312 1.648438 29.34375 -0.234375 C 30.75 -2.128906 31.960938 -4.160156 32.984375 -6.328125 C 34.003906 -8.492188 34.628906 -10.78125 34.859375 -13.1875 C 34.992188 -14.875 34.90625 -16.585938 34.59375 -18.328125 C 34.28125 -20.078125 33.554688 -21.640625 32.421875 -23.015625 C 31.285156 -24.398438 29.863281 -25.351562 28.15625 -25.875 C 26.445312 -26.394531 24.742188 -26.625 23.046875 -26.5625 C 20.765625 -26.46875 18.535156 -26.125 16.359375 -25.53125 C 14.179688 -24.945312 12.039062 -24.25 9.9375 -23.4375 C 7.832031 -22.625 5.789062 -21.710938 3.8125 -20.703125 Z M 3.8125 -20.703125 "/>
            </g>
        </g>
    </g>
    <g class="text-color" fill-opacity="1">
        <g transform="translate(230.657604, 165.6761)">
            <g>
                <path d="M 4.78125 -36.625 L 31.34375 -39.984375 L 33.203125 -34.328125 L 21.4375 -21 C 23.125 -21.675781 25.316406 -22.03125 28.015625 -22.0625 C 30.722656 -22.101562 33.1875 -21.472656 35.40625 -20.171875 C 38.65625 -18.179688 40.269531 -15.332031 40.25 -11.625 C 40.238281 -7.914062 38.945312 -4.515625 36.375 -1.421875 C 33.738281 1.609375 30.695312 4.3125 27.25 6.6875 L 20.90625 0.59375 C 23.40625 -0.875 25.550781 -2.550781 27.34375 -4.4375 C 28.125 -5.1875 28.75 -6.023438 29.21875 -6.953125 C 29.695312 -7.878906 29.898438 -8.820312 29.828125 -9.78125 C 29.765625 -10.75 29.375 -11.53125 28.65625 -12.125 C 27.945312 -12.726562 27.101562 -13.128906 26.125 -13.328125 C 24.6875 -13.585938 23.226562 -13.515625 21.75 -13.109375 C 20.269531 -12.703125 18.828125 -12.113281 17.421875 -11.34375 C 16.023438 -10.582031 14.664062 -9.742188 13.34375 -8.828125 C 12.03125 -7.921875 10.691406 -6.898438 9.328125 -5.765625 L 3.03125 -10.359375 L 19.671875 -30.21875 L 5.328125 -28.375 Z M 4.78125 -36.625 "/>
            </g>
        </g>
    </g>
    <g class="text-color" fill-opacity="1">
        <g transform="translate(284.888965, 165.6761)">
            <g>
                <path d="M 23.53125 -36.578125 L 30.671875 -31.640625 L 13.1875 -17.71875 L 35.84375 -6.84375 L 31.734375 2.25 L 3.90625 -12.5 L 3.328125 -20.453125 Z M 23.53125 -36.578125 "/>
            </g>
        </g>
    </g>
</svg>

<!DOCTYPE html>
<html lang="ja">
<head>

  <meta charset="UTF-8">
  <title>favicon-js.html</title>

  <link rel="stylesheet" href="favicon.css"/>

  <script type="text/javascript" src="favicon-js.js"></script>

</head>
<body>
favicon-js.html
</body>
</html>

window.addEventListener('DOMContentLoaded', function () {

  // ダークモードであればtrue。
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

  // 追加するlinkタグの準備。
  const linkTag = document.createElement('link');
  linkTag.rel = 'icon';
  linkTag.type = 'image/png';
  // ライトモードで読み込むPNGファイルを指定。
  linkTag.href = 'favicon-lightmode.png';

  if (isDarkMode) {
    // ダークモードで読み込むPNGファイルを指定。
    linkTag.href = 'favicon-darkmode.png';
  }

  // linkタグを追加。
  document.head.appendChild(linkTag);

});