add new breakpoint sized favicons

CodeConnoisseur74 · Mar 22, 2024 · e54c482 · e54c482
1 parent 191868b
commit e54c482
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 39 deletions.
diff --git a/README.md → favicons/README.md b/README.md → favicons/README.md
diff --git a/favicons/android-chrome-192x192.png b/favicons/android-chrome-192x192.png
diff --git a/favicons/android-chrome-512x512.png b/favicons/android-chrome-512x512.png
diff --git a/favicons/apple-touch-icon.png b/favicons/apple-touch-icon.png
diff --git a/favicons/browserconfig.xml b/favicons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/favicons/favicon-16x16.png b/favicons/favicon-16x16.png
diff --git a/favicons/favicon-32x32.png b/favicons/favicon-32x32.png
diff --git a/favicons/favicon.ico b/favicons/favicon.ico
diff --git a/favicons/mstile-150x150.png b/favicons/mstile-150x150.png
diff --git a/favicons/safari-pinned-tab.svg b/favicons/safari-pinned-tab.svg
diff --git a/favicons/site.webmanifest b/favicons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/index.html b/index.html
@@ -1,49 +1,59 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="shortcut icon" type="image/png" href="assets/images/favicon.ico" />
-  <link href="https://source.unsplash.com/1600x900/?landscape">
-  <title>Weather App</title>
-  <!-- google fonts -->
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" type="text/css">
-  <!-- css & js stylesheets -->
-  <link rel="stylesheet" href="assets/css/style.css">
-  <script src="assets/js/script.js" defer></script>
-</head>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
+    <link rel="manifest" href="favicons/site.webmanifest">
+    <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+    <link href="https://source.unsplash.com/1600x900/?landscape">
+    <title>Weather App</title>
+    <!-- google fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
+      rel="stylesheet" type="text/css">
+    <!-- css & js stylesheets -->
+    <link rel="stylesheet" href="assets/css/style.css">
+    <script src="assets/js/script.js" defer></script>
+  </head>
 
-<body>
-  <div class="box">
-    <div class="search">
-      <input type="text" class="search-bar" placeholder="Search">
-      <button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
-          width="1.5em" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
-          </path>
-        </svg></button>
-    </div>
-    <div class="weather loading">
-      <h2 class="city">Weather in Stockholm</h2>
-      <h1 class="temp">21°C</h1>
-      <div class="flex">
-        <img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
-        <div class="description">Cloudy</div>
+  <body>
+    <div class="box">
+      <div class="search">
+        <input type="text" class="search-bar" placeholder="Search">
+        <button><svg stroke="currentColor" fill="currentColor" stroke-width="0"
+            viewBox="0 0 1024 1024" height="1.5em"
+            width="1.5em" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
+            </path>
+          </svg></button>
       </div>
-      <div class="humidity">Humidity: 20%</div>
-      <div class="wind">Wind speed: 8.4 km/h</div>
-      <div class="attribute">
-        <img src="assets/images/logo-op.png" alt="Openweather Logo">
-        <p class="logo">Weather data provided by Openweather
-          <a href="https://openweathermap.org/">https://openweathermap.org/</a>
-        </p>
+      <div class="weather loading">
+        <h2 class="city">Weather in Stockholm</h2>
+        <h1 class="temp">21°C</h1>
+        <div class="flex">
+          <img src="https://openweathermap.org/img/wn/04n.png" alt
+            class="icon" />
+          <div class="description">Cloudy</div>
+        </div>
+        <div class="humidity">Humidity: 20%</div>
+        <div class="wind">Wind speed: 8.4 km/h</div>
+        <div class="attribute">
+          <img src="assets/images/logo-op.png" alt="Openweather Logo">
+          <p class="logo">Weather data provided by Openweather
+            <a
+              href="https://openweathermap.org/">https://openweathermap.org/</a>
+          </p>
         </div>
 
+      </div>
     </div>
-  </div>
-</body>
+  </body>
 
 </html>