Merge pull request #20 from revolter/fix/out-of-sync-favicon-HTML

Fixed out of sync favicon HTML

Author: revolter

README.md

@@ -24,16 +24,18 @@ https://mermaid.live.
 
 ### Favicon
 
-- Check if RealFaviconGenerator got updated
-  (https://realfavicongenerator.net/change_log) by running
+- Check if RealFaviconGenerator
+  [got updated](https://realfavicongenerator.net/change_log) by running
   ```sh
   npm run check-favicon-update
   ```
 - If you update [the source SVG](sources/favicon/favicon.svg), or if
-  RealFaviconGenerator gets updated, generate the favicon assets by running
+  RealFaviconGenerator gets updated, update the favicon assets by running
   ```sh
-  npm run generate-favicon
+  npm run update-favicon
   ```
+- Check the generated (and deployed) favicon assets by going to
+  https://realfavicongenerator.net/favicon_checker?protocol=https&site=notepadtab.com
 
 ## Usage
 

_config.yml

@@ -20,7 +20,7 @@ defaults:
     - scope:
           path: ""
       values:
-          image: /assets/favicon/android-chrome-512x512.png
+          image: /assets/images/favicon/android-chrome-512x512.png
 
 minima:
     skin: auto

_includes/custom-head.html

@@ -1,10 +1,9 @@
-{% assign favicon_version = 1 %}
-<link rel="apple-touch-icon" sizes="180x180" href="{% link /assets/favicon/apple-touch-icon.png %}?v={{ favicon_version }}">
-<link rel="icon" type="image/png" sizes="32x32" href="{% link /assets/favicon/favicon-32x32.png %}?v={{ favicon_version }}">
-<link rel="icon" type="image/png" sizes="16x16" href="{% link /assets/favicon/favicon-16x16.png %}?v={{ favicon_version }}">
-<link rel="manifest" href="{% link assets/favicon/site.webmanifest %}?v={{ favicon_version }}">
-<link rel="mask-icon" href="{% link /assets/favicon/safari-pinned-tab.svg %}?v={{ favicon_version }}" color="#c6a000">
-<link rel="shortcut icon" href="{% link /assets/favicon/favicon.ico %}?v={{ favicon_version }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{% link /assets/images/favicon/apple-touch-icon.png %}?v=2">
+<link rel="icon" type="image/png" sizes="32x32" href="{% link /assets/images/favicon/favicon-32x32.png %}?v=2">
+<link rel="icon" type="image/png" sizes="16x16" href="{% link /assets/images/favicon/favicon-16x16.png %}?v=2">
+<link rel="manifest" href="{% link /assets/images/favicon/site.webmanifest %}?v=2">
+<link rel="mask-icon" href="{% link /assets/images/favicon/safari-pinned-tab.svg %}?v=2" color="#5bbad5">
+<link rel="shortcut icon" href="{% link /assets/images/favicon/favicon.ico %}?v=2">
 <meta name="msapplication-TileColor" content="#da532c">
-<meta name="msapplication-config" content="{% link assets/favicon/browserconfig.xml %}?v={{ favicon_version }}">
-<meta name="theme-color" content="#ffffff">
+<meta name="msapplication-config" content="{% link /assets/images/favicon/browserconfig.xml %}?v=2">
+<meta name="theme-color" content="#ffffff">

assets/favicon/android-chrome-192x192.png renamed to assets/images/favicon/android-chrome-192x192.png

@@ -5,7 +5,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="{% link /assets/favicon/mstile-150x150.png %}?v=2"/>
+            <square150x150logo src="{% link /assets/images/favicon/mstile-150x150.png %}?v=2"/>
             <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>