feat: add new logo as favicon and app icons

- Introduced a new logo for the application. - Updated favicon and app icons in the manifest for better branding.
2 years ago · 731dd569b8
16 changed files with 233 additions and 18 deletions
--- a/src/404.html
+++ b/src/404.html
@ -1,11 +1,79 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-	<head>
+  <head>
-		<meta charset="utf-8" />
+    <meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		%sveltekit.head%
+
-	</head>
+    <!-- Favicon -->
-	<body data-sveltekit-preload-data="hover">
+    <link
-		<div style="display: contents">%sveltekit.body%</div>
+      rel="icon"
-	</body>
+      href="/icons/icon-32x32.png?v=1"
      sizes="32x32"
      type="image/png"
    />
    <link
      rel="icon"
      href="/icons/icon-16x16.png?v=1"
      sizes="16x16"
      type="image/png"
    />
    <!-- Apple Touch Icons -->
    <link
      rel="apple-touch-icon"
      href="/icons/icon-180x180.png?v=1"
      sizes="180x180"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-192x192.png?v=1"
      sizes="192x192"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-120x120.png?v=1"
      sizes="120x120"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-76x76.png?v=1"
      sizes="76x76"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-152x152.png?v=1"
      sizes="152x152"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-512x512.png?v=1"
      sizes="512x512"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-60x60.png?v=1"
      sizes="60x60"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-57x57.png?v=1"
      sizes="57x57"
    />
    <!-- Fallback without sizes -->
    <link rel="apple-touch-icon" href="/icons/icon-180x180.png?v=1" />
    <!-- Web App Manifest -->
    <link rel="manifest" href="/manifest.json?v=1" />
    <!-- Open Graph and Twitter Card -->
    <meta property="og:image" content="/icons/icon-512x512.png?v=1" />
    <meta name="twitter:image" content="/icons/icon-512x512.png?v=1" />
    <!-- SvelteKit Head -->
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
--- a/src/app.html
+++ b/src/app.html
@ -1,11 +1,79 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-	<head>
+  <head>
-		<meta charset="utf-8" />
+    <meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		%sveltekit.head%
+
-	</head>
+    <!-- Favicon -->
-	<body data-sveltekit-preload-data="hover">
+    <link
-		<div style="display: contents">%sveltekit.body%</div>
+      rel="icon"
-	</body>
+      href="/icons/icon-32x32.png?v=1"
      sizes="32x32"
      type="image/png"
    />
    <link
      rel="icon"
      href="/icons/icon-16x16.png?v=1"
      sizes="16x16"
      type="image/png"
    />
    <!-- Apple Touch Icons -->
    <link
      rel="apple-touch-icon"
      href="/icons/icon-180x180.png?v=1"
      sizes="180x180"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-192x192.png?v=1"
      sizes="192x192"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-120x120.png?v=1"
      sizes="120x120"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-76x76.png?v=1"
      sizes="76x76"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-152x152.png?v=1"
      sizes="152x152"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-512x512.png?v=1"
      sizes="512x512"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-60x60.png?v=1"
      sizes="60x60"
    />
    <link
      rel="apple-touch-icon"
      href="/icons/icon-57x57.png?v=1"
      sizes="57x57"
    />
    <!-- Fallback without sizes -->
    <link rel="apple-touch-icon" href="/icons/icon-180x180.png?v=1" />
    <!-- Web App Manifest -->
    <link rel="manifest" href="/manifest.json?v=1" />
    <!-- Open Graph and Twitter Card -->
    <meta property="og:image" content="/icons/icon-512x512.png?v=1" />
    <meta name="twitter:image" content="/icons/icon-512x512.png?v=1" />
    <!-- SvelteKit Head -->
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/icons/icon-120x120.png
+++ b/static/icons/icon-120x120.png
--- a/static/icons/icon-152x152.png
+++ b/static/icons/icon-152x152.png
--- a/static/icons/icon-16x16.png
+++ b/static/icons/icon-16x16.png
--- a/static/icons/icon-180x180.png
+++ b/static/icons/icon-180x180.png
--- a/static/icons/icon-192x192.png
+++ b/static/icons/icon-192x192.png
--- a/static/icons/icon-32x32.png
+++ b/static/icons/icon-32x32.png
--- a/static/icons/icon-48x48.png
+++ b/static/icons/icon-48x48.png
--- a/static/icons/icon-512x512.png
+++ b/static/icons/icon-512x512.png
--- a/static/icons/icon-57x57.png
+++ b/static/icons/icon-57x57.png
--- a/static/icons/icon-60x60.png
+++ b/static/icons/icon-60x60.png
--- a/static/icons/icon-76x76.png
+++ b/static/icons/icon-76x76.png
--- a/static/icons/icon.svg
+++ b/static/icons/icon.svg
@ -0,0 +1,16 @@
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_263_2089)">
 <rect x="64" y="64" width="64" height="64" rx="16" transform="rotate(-180 64 64)" fill="#9333EA"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.999 34.9612L14.999 17.001L18.999 17.001L18.999 34.9612C18.999 38.1329 20.4912 41.1126 23.0143 42.9967L28.377 47.0013C31.9165 49.6443 33.999 53.8145 33.999 58.2417L33.999 64.001L29.999 64.001L29.999 58.2417C29.999 55.0701 28.5068 52.0904 25.9837 50.2063L20.621 46.2017C17.0816 43.5587 14.999 39.3884 14.999 34.9612Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.999 34.9612L48.999 17.001L44.999 17.001L44.999 34.9612C44.999 38.1329 43.5069 41.1126 40.9838 42.9967L35.621 47.0013C32.0816 49.6443 29.999 53.8145 29.999 58.2417L29.999 64.001L33.999 64.001L33.999 58.2417C33.999 55.0701 35.4912 52.0904 38.0143 50.2063L43.3771 46.2017C46.9165 43.5587 48.999 39.3884 48.999 34.9612Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M29.799 64.001L29.799 27.8867L34.199 27.8867L34.199 64.001L29.799 64.001Z" fill="white"/>
 <path d="M40.999 18.001C40.999 14.6873 43.6853 12.001 46.999 12.001C50.3127 12.001 52.999 14.6873 52.999 18.001C52.999 21.3147 50.3127 24.001 46.999 24.001C43.6853 24.001 40.999 21.3147 40.999 18.001Z" fill="white"/>
 <path d="M11.0137 18.001C11.0137 14.6873 13.7 12.001 17.0137 12.001C20.3274 12.001 23.0137 14.6873 23.0137 18.001C23.0137 21.3147 20.3274 24.001 17.0137 24.001C13.7 24.001 11.0137 21.3147 11.0137 18.001Z" fill="white"/>
 <path d="M26.999 30.001C26.999 27.2396 29.2376 25.001 31.999 25.001C34.7604 25.001 36.999 27.2396 36.999 30.001C36.999 32.7624 34.7604 35.001 31.999 35.001C29.2376 35.001 26.999 32.7624 26.999 30.001Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_263_2089">
 <rect x="64" y="64" width="64" height="64" rx="16" transform="rotate(-180 64 64)" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/static/manifest.json
+++ b/static/manifest.json
@ -0,0 +1,63 @@
 {
  "name": "GitWorkshop.dev",
  "short_name": "GitWorkshop",
  "icons": [
    {
      "src": "icons/icon-512x512.png?v=1",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png?v=1",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-180x180.png?v=1",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png?v=1",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-120x120.png?v=1",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
      "src": "icons/icon-76x76.png?v=1",
      "sizes": "76x76",
      "type": "image/png"
    },
    {
      "src": "icons/icon-60x60.png?v=1",
      "sizes": "60x60",
      "type": "image/png"
    },
    {
      "src": "icons/icon-57x57.png?v=1",
      "sizes": "57x57",
      "type": "image/png"
    },
    {
      "src": "icons/icon-48x48.png?v=1",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icons/icon-32x32.png?v=1",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "icons/icon-16x16.png?v=1",
      "sizes": "16x16",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone"
 }