time.html

<!DOCTYPE html>
<head>
  <link rel="icon">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75,700&display=swap" rel="stylesheet">

  <title></title>
  <script>
    function updateTitle() {
      document.querySelector('svg text').textContent = Date().toLocaleString().slice(16, 18)
      if (window.location.hash === '#minutes') {
        document.querySelector('svg text').textContent = Date().toLocaleString().slice(19, 21)
      }

      document.title = Date().toLocaleString().slice(16, 21)

      document.querySelector('link[rel="icon"]').href = 'data:image/svg+xml,' + document.querySelector('svg').outerHTML.replaceAll('"', '%22').replaceAll(/\n/g, ' ').replaceAll(/\s+/g, ' ')

    }
    setInterval(updateTitle, 3000)
    window.requestAnimationFrame(updateTitle)
  </script>
</head>

<body style="background: black">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100">
    <style>
      text {
        font-family: "Open Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        font-variation-settings: "wdth" 75;
      }
    </style>
    <rect fill="white" rx="15" x="0" y="0" width="100" height="100" />
    <text y="80" x="50" text-anchor="middle" font-size="85"></text>
  </svg>
</body>