feat: favicon

index.html

@@ -20,16 +20,15 @@
     </script>
   <script type="module" src="main.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-  <title>🐝 File Whizz • No need for cloud when you have wings</title>
+  <title>File Whizz • No need for cloud when you have wings</title>
+  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="shortcut icon" href="/favicon.ico" />
   <meta name="description" content="Peer-to-peer file transfers in your web browser. No intermediary servers." />
   <meta property="og:title" content="🐝 File Whizz • No need for cloud when you have wings">
   <meta property="og:description" content="Peer-to-peer file transfers in your web browser. No intermediary servers.">
   <meta property="og:url" content="https://file.klemek.fr">
   <meta property="og:image" content="https://file.klemek.fr/preview.jpg">
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="🐝 File Whizz • No need for cloud when you have wings">
-  <meta name="twitter:description" content="Peer-to-peer file transfers in your web browser. No intermediary servers.">
-  <meta name="twitter:image" content="https://file.klemek.fr/preview.jpg" />
   <script defer src="https://tics.klemek.fr/script.js" data-website-id="a40b5647-4b59-4e41-b080-38cafb540651"></script>
 </head>
 
@@ -38,7 +37,7 @@
     <main id="app" class="hero-content text-center" style="display: none">
       <div class="card w-full max-w-sm bg-base-100/95 shadow-sm">
         <div class="card-body">
-          <h2 class="card-title text-4xl">🐝 File Whizz</h2>
+          <h2 class="card-title text-4xl"><img src="/favicon.svg" class="title-img"> File Whizz</h2>
           <div v-if="isServer" class="mt-2 w-full italic">
             Send files easily through <a class="underline" target="_blank" href="https://webrtc.org/">WebRTC</a>
             directly to another device, without an intermediary server.

style.css

@@ -27,3 +27,10 @@ h6 .lucide {
   aspect-ratio: 1 / 1;
   width: 100%;
 }
+
+.title-img {
+  width: 4rem;
+  height: 4rem;
+  margin-right: 0.5rem;
+  display: inline-block;
+}