Add favicons

8 files changed, 40 insertions, 3 deletions

diff --git a/ico/apple-touch-icon.png b/ico/apple-touch-icon.png
new file mode 100644
index 0000000..abd842d
--- /dev/null
+++ b/ico/apple-touch-icon.png
diff --git a/ico/favicon.ico b/ico/favicon.ico
new file mode 100644
index 0000000..cc066f0
--- /dev/null
+++ b/ico/favicon.ico
diff --git a/ico/icon-192-maskable.png b/ico/icon-192-maskable.png
new file mode 100644
index 0000000..856c8c7
--- /dev/null
+++ b/ico/icon-192-maskable.png
diff --git a/ico/icon-192.png b/ico/icon-192.png
new file mode 100644
index 0000000..49d2d39
--- /dev/null
+++ b/ico/icon-192.png
diff --git a/ico/icon-512-maskable.png b/ico/icon-512-maskable.png
new file mode 100644
index 0000000..430213f
--- /dev/null
+++ b/ico/icon-512-maskable.png
diff --git a/ico/icon-512.png b/ico/icon-512.png
new file mode 100644
index 0000000..370613d
--- /dev/null
+++ b/ico/icon-512.png
diff --git a/index.html b/index.html
index 8b8a81d..983b33e 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,13 @@
     <script src="https://cdn.usefathom.com/script.js" data-site="NEBPAKSA" defer></script>
     <script src="https://cwjs.mastercw.com/cw.min.js"></script>
     <meta name="canonical" href="https://morsehero.com">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/ico/icon-192.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/ico/icon-192.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <meta name="theme-color" content="#2c3e50">
+
     <style>
         body {
             font-family: 'Fredoka One', 'Baloo', 'Arial Rounded MT Bold', sans-serif;
@@ -425,9 +432,8 @@
         </div>
 
         <footer class="footer">
-            <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>.</p>
-            <p>For a more complete and professional Morse Code training solution visit <a
-                    href="https://www.mastercw.com">Master CW</a>.</p>
+            <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>. For a complete and professional
+                Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
         </footer>
     </div>
 
diff --git a/site.webmanifest b/site.webmanifest
new file mode 100644
index 0000000..4c92c71
--- /dev/null
+++ b/site.webmanifest
@@ -0,0 +1,31 @@
+{
+    "name": "Morse Hero",
+    "short_name": "Morse Hero",
+    "icons": [
+        {
+            "src": "/ico/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/ico/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/ico/icon-192-maskable.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "/ico/icon-512-maskable.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ],
+    "theme_color": "#2c3e50",
+    "background_color": "#2c3e50",
+    "display": "standalone"
+}