feat: icons + manifest + navigation

1. Added icons/favicons for iOS/Android/modern browsers
2. Added manifest.json with android icons
3. Added icon with navigation to /

index.html

@@ -7,7 +7,71 @@
       name="description"
       content="Interactive TypeScript tool: learn how to convert types effectively with hands-on examples, TypeScript Playground, and references to widely used libraries"
     />
-    <link rel="icon" href="/icon.jpg" />
+    <link rel="manifest" href="manifest.json" />
+    <link
+      href="/safari-macos-icon-196x196.png"
+      rel="icon"
+      sizes="196x196"
+      type="image/png"
+    />
+    <link
+      href="/android-icon-192x192.png"
+      rel="icon"
+      sizes="192x192"
+      type="image/png"
+    />
+    <link
+      href="/apple-touch-icon-180x180.png"
+      rel="apple-touch-icon"
+      sizes="180x180"
+      type="image/png"
+    />
+    <link
+      href="/apple-touch-icon-167x167.png"
+      rel="apple-touch-icon"
+      sizes="167x167"
+      type="image/png"
+    />
+    <link
+      href="/apple-touch-icon-152x152.png"
+      rel="apple-touch-icon"
+      sizes="152x152"
+      type="image/png"
+    />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
+    <link
+      href="/safari-macos-icon-196x196.png"
+      rel="icon"
+      sizes="144x144"
+      type="image/png"
+    />
+    <link
+      href="/safari-macos-icon-196x196.png"
+      rel="icon"
+      sizes="96x96"
+      type="image/png"
+    />
+    <link
+      href="/safari-macos-icon-196x196.png"
+      rel="icon"
+      sizes="72x72"
+      type="image/png"
+    />
+    <link
+      href="/safari-macos-icon-196x196.png"
+      rel="icon"
+      sizes="48x48"
+      type="image/png"
+    />
+    <link
+      href="/safari-macos-icon-196x196.png"
+      rel="icon"
+      sizes="36x36"
+      type="image/png"
+    />
+    <link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
+    <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
+    <link href="/favicon-16x16.ico" rel="icon" />
     <meta name="image" content="/image.png" />
     <meta name="keywords" content="TypeScript Conversion TS" />
     <link rel="canonical" href="https://ts-conversion.beraliv.com/" />

public/manifest.json

@@ -0,0 +1,46 @@
+{
+  "short_name": "ts-conversion",
+  "name": "Convert one type to another in TypeScript",
+  "display": "standalone",
+  "start_url": "/",
+  "theme_color": "#242424",
+  "background_color": "#242424",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

src/components/Intro.module.css

@@ -3,6 +3,21 @@
   gap: 0.5rem;
 }
 
+.Title {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 1rem;
+}
+
+.IconWrapper {
+  align-self: end;
+}
+
+.Icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .ProgressData {
   font-size: 0.75rem;
 }

src/components/Intro.tsx

@@ -1,15 +1,22 @@
 import styles from "./Intro.module.css";
+import { Link } from "./Link";
 
 export const Intro = () => (
   <div className={styles.Intro}>
-    <h2>
-      Converting types in TypeScript
-      <sup className={styles.ProgressData}>beta</sup>
-    </h2>
+    <div className={styles.Title}>
+      <Link
+        className={styles.IconWrapper}
+        text={<img className={styles.Icon} src="/favicon-64x64.png" />}
+        href="/"
+      />
+      <h2>
+        ts-conversion
+        <sup className={styles.ProgressData}>beta</sup>
+      </h2>
+    </div>
     <p>
-      Interactive TypeScript tool: learn how to transform types effectively with
-      hands-on examples, TypeScript Playground, and references to widely used
-      libraries.
+      Learn how to convert types effectively with hands-on examples, TypeScript
+      Playground, and references to widely used libraries.
     </p>
   </div>
 );

src/components/Link.tsx

@@ -3,18 +3,19 @@ import { ExternalIcon } from "./icons/ExternalIcon";
 import style from "./Link.module.css";
 
 export type LinkProps = {
+  className?: string;
   href: string;
-  text: string;
+  text: string | JSX.Element;
   external?: boolean;
 };
 
-export const Link = ({ href, text, external }: LinkProps) => {
+export const Link = ({ className, href, text, external }: LinkProps) => {
   const linkProps = external
     ? { target: "_blank", rel: "noopener noreferrer" }
     : {};
 
   return (
-    <a href={href} {...linkProps}>
+    <a className={className} href={href} {...linkProps}>
       {text}
       {external ? (
         <span className={style.LinkExternal}>