Test apple-touch-icon and favicon in HTML

thevickypedia · Mar 6, 2024 · 6a17ee8 · 6a17ee8
1 parent 3c6f10f
commit 6a17ee8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,11 @@ To source data from this repository please use any of the following links
 
 ### For images and other data-types
 ```text
-https://raw.githubusercontent.com/thevickypedia/open-source/main/
+https://raw.githubusercontent.com/thevickypedia/open-source/main/images/
+```
+**[OR]**
+```text
+https://thevickypedia.github.io/open-source/images/
 ```
 
 Alternatively, the following can be used which will eventually redirect to `raw.githubusercontent.com`
@@ -34,7 +38,8 @@ https://[username].github.io/[repository]/[filename].js
 <link rel="stylesheet" href="https://thevickypedia.github.io/open-source/nightmode/night.css">
 ```
 
-- `raw.github.com` cannot be used for web UI since GitHub changed the `Content-Type`
+### Without GitHub pages!
+- `raw.github.com` cannot be used for web UI, since GitHub changed the `Content-Type`
   - Refer [GitHub blog][blog]
 - Users may also experience `(failed)net::ERR_BLOCKED_BY_ORB` 
 

diff --git a/index.html b/index.html
@@ -1,35 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sample Page for Night Mode</title>
-  <!-- CSS and JS for night mode -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
-  <script type="text/javascript" src="https://thevickypedia.github.io/open-source/nightmode/night.js" defer></script>
-  <link rel="stylesheet" type="text/css" href="https://thevickypedia.github.io/open-source/nightmode/night.css">
-  <style>
-    body {
-      text-align:center;
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample Page for Night Mode</title>
+    <!-- CSS and JS for night mode -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
+    <script type="text/javascript" src="https://thevickypedia.github.io/open-source/nightmode/night.js" defer></script>
+    <link rel="stylesheet" type="text/css" href="https://thevickypedia.github.io/open-source/nightmode/night.css">
+    <!-- Favicon.ico and Apple Touch Icon -->
+    <link rel="icon" href="https://thevickypedia.github.io/open-source/images/favicon.ico">
+    <link rel="apple-touch-icon" href="https://thevickypedia.github.io/open-source/images/apple-touch-icon.jpg">
+    <!-- Can also be reached with raw.githubusercontent.com
+    <link rel="icon" href="https://raw.githubusercontent.com/thevickypedia/open-source/main/images/favicon.ico">
+    <link rel="apple-touch-icon" href="https://raw.githubusercontent.com/thevickypedia/open-source/main/images/apple-touch-icon.jpg">
+     -->
+    <style>
+        body {
+            text-align: center;
+        }
+    </style>
 </head>
 <div class="toggler fa fa-moon-o"></div>
 <body translate="no" class="night">
-    <h1>This is a sample webpage to serve CSS and JS for night-mode</h1>
-    <h1>Sample Text for h1</h1>
-    <h2>Sample Text for h2</h2>
-    <h3>Sample Text for h3</h3>
-    <h4>Sample Text for h4</h4>
-    <p>Sample Text for p</p>
-    <p>Sample Text for p</p>
-    <input placeholder="Sample text for input box" size="28px">
-    <br><br>
-    <button>Place Holder Button</button>
-    <br><br><br><br>
-    <h2>Dots</h2>
-    <hr style="border-bottom: dotted 10px;" />
-    <hr style="border-top: dotted 10px;" />
+<h1>This is a sample webpage to serve CSS and JS for night-mode</h1>
+<h1>Sample Text for h1</h1>
+<h2>Sample Text for h2</h2>
+<h3>Sample Text for h3</h3>
+<h4>Sample Text for h4</h4>
+<p>Sample Text for p</p>
+<p>Sample Text for p</p>
+<input placeholder="Sample text for input box" size="28px">
+<br><br>
+<button>Place Holder Button</button>
+<br><br><br><br>
+<h2>Dots</h2>
+<hr style="border-bottom: dotted 10px;"/>
+<hr style="border-top: dotted 10px;"/>
 </body>
 </html>