favicon

Author: AnshumanMahato

docs/attributions.md

@@ -5,6 +5,13 @@
 - <a href='https://www.freepik.com/vectors/background'>Background vector created by brgfx - www.freepik.com</a>
 - <a href='https://www.freepik.com/vectors/halloween'>Halloween vector created by vectorpouch - www.freepik.com</a>
 
+- The favicon was generated using the following graphics from Twitter Twemoji:
+
+  - Graphics Title: 1f382.svg
+  - [Graphics Author: Copyright 2020 Twitter, Inc and other contributors](https://github.com/twitter/twemoji)
+  - Graphics Source: [https://github.com/twitter/twemoji/blob/master/assets/svg/1f382.svg](https://github.com/twitter/twemoji/blob/master/assets/svg/1f382.svg)
+  - [Graphics License: CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/)
+
 ---
 
 <div align="center">Made with 💖 by Anshuman Mahato</div>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "happy-birthday-card",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A birthday card template",
   "main": "index.js",
   "default": "index.html",
@@ -31,7 +31,9 @@
   },
   "homepage": "https://github.com/AnshumanMahato/Happy-Birthday-Card#readme",
   "devDependencies": {
+    "@parcel/packager-raw-url": "^2.6.2",
     "@parcel/transformer-sass": "^2.6.2",
+    "@parcel/transformer-webmanifest": "^2.6.2",
     "parcel": "^2.6.2",
     "sass": "^1.53.0"
   },

package.json

@@ -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"
+}

src/resources/favicon/android-chrome-192x192.png

@@ -31,11 +31,19 @@
       href="https://fonts.googleapis.com/css2?family=Courgette&display=swap"
       rel="stylesheet"
     />
+
+    <!--Generated Read Time Var-->
     {{^READ_TIME}}
 
     <link rel="stylesheet" href="./scss/main.scss" />
-    <!-- animation    -->
 
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="./resources/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./resources/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./resources/favicon/favicon-16x16.png">
+    <link rel="manifest" href="./resources/favicon/site.webmanifest">
+
+    <!-- animation    -->
     <script src="./js/index.js" type="module" defer></script>
 
     <!-- some extensions -->