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

Fixed out of sync favicon HTML

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/browserconfig.xml → assets/images/favicon/browserconfig.xml

@@ -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>

assets/favicon/site.webmanifest → assets/images/favicon/site.webmanifest

@@ -6,12 +6,12 @@
     "short_name": "Notepad Tab",
     "icons": [
         {
-            "src": "{% link /assets/favicon/android-chrome-192x192.png %}?v=2",
+            "src": "{% link /assets/images/favicon/android-chrome-192x192.png %}?v=2",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "{% link /assets/favicon/android-chrome-512x512.png %}?v=2",
+            "src": "{% link /assets/images/favicon/android-chrome-512x512.png %}?v=2",
             "sizes": "512x512",
             "type": "image/png"
         }

package.json

@@ -2,9 +2,15 @@
     "scripts": {
         "serve": "watchy --watch '_config.yml' --watch '_plugins/*.rb' -- bundle exec jekyll serve --host '0.0.0.0' --trace --baseurl '/notepadtab.com'",
 
-        "pregenerate-favicon": "mkdir -p assets/favicon",
-        "generate-favicon": "mkdir -p assets/favicon && real-favicon generate sources/favicon/faviconDescription.json sources/favicon/faviconData.json assets/favicon",
-        "postgenerate-favicon": "for file in assets/favicon/browserconfig.xml assets/favicon/site.webmanifest; do perl -pi -e 'print \"---\\n---\\n\\n\" if $. == 1' \"$file\"; perl -pi -e 's/\\/assets\\/.+(?=\\?v=\\d+)/{% link $& %}/g' \"$file\"; done",
+        "pregenerate-favicon": "mkdir -p assets/images/favicon",
+        "generate-favicon": "real-favicon generate sources/favicon/faviconDescription.json sources/favicon/faviconData.json assets/images/favicon",
+        "postgenerate-favicon": "for file in assets/images/favicon/browserconfig.xml assets/images/favicon/site.webmanifest; do perl -pi -e 'print \"---\\n---\\n\\n\" if $. == 1' \"$file\"; done",
+        "preinject-favicon": "mkdir -p _includes && touch _includes/custom-head.html",
+        "inject-favicon": "real-favicon inject sources/favicon/faviconData.json _includes _includes/custom-head.html",
+        "postinject-favicon": "for file in _includes/custom-head.html; do perl -pi -e 's/<\\/?(html|head|body)>\\n?//g' \"$file\"; done",
+        "linkify-favicon": "for file in assets/images/favicon/browserconfig.xml assets/images/favicon/site.webmanifest _includes/custom-head.html; do perl -pi -e 's/\\/assets\\/.+(?=\\?v=\\d+)/{% link $& %}/g' \"$file\"; done",
+        "update-favicon": "npm run generate-favicon && npm run inject-favicon && npm run linkify-favicon",
+
         "check-favicon-update": "real-favicon check-for-update --fail-on-update sources/favicon/faviconData.json"
     },
     "dependencies": {

sources/favicon/faviconData.json

@@ -1 +1 @@
-{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/browserconfig.xml","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/favicon.ico","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/assets/favicon/apple-touch-icon.png?v=2\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/favicon/favicon-32x32.png?v=2\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/assets/favicon/favicon-16x16.png?v=2\">\n<link rel=\"manifest\" href=\"/assets/favicon/site.webmanifest?v=2\">\n<link rel=\"mask-icon\" href=\"/assets/favicon/safari-pinned-tab.svg?v=2\" color=\"#5bbad5\">\n<link rel=\"shortcut icon\" href=\"/assets/favicon/favicon.ico?v=2\">\n<meta name=\"msapplication-TileColor\" content=\"#da532c\">\n<meta name=\"msapplication-config\" content=\"/assets/favicon/browserconfig.xml?v=2\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"true","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-config\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/assets/favicon"},"preview_picture_url":"https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/favicon_preview.png","version":"0.16"}
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/browserconfig.xml","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/favicon.ico","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/assets/images/favicon/apple-touch-icon.png?v=2\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/images/favicon/favicon-32x32.png?v=2\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/assets/images/favicon/favicon-16x16.png?v=2\">\n<link rel=\"manifest\" href=\"/assets/images/favicon/site.webmanifest?v=2\">\n<link rel=\"mask-icon\" href=\"/assets/images/favicon/safari-pinned-tab.svg?v=2\" color=\"#5bbad5\">\n<link rel=\"shortcut icon\" href=\"/assets/images/favicon/favicon.ico?v=2\">\n<meta name=\"msapplication-TileColor\" content=\"#da532c\">\n<meta name=\"msapplication-config\" content=\"/assets/images/favicon/browserconfig.xml?v=2\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"true","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-config\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/assets/images/favicon"},"preview_picture_url":"https://realfavicongenerator.net/files/94a44176afe7cfd3faaadb44f5d5a14d67417754/favicon_preview.png","version":"0.16"}

sources/favicon/faviconDescription.json

@@ -1,6 +1,6 @@
 {
 	"masterPicture": "sources/favicon/favicon.svg",
-	"iconsPath": "/assets/favicon",
+	"iconsPath": "/assets/images/favicon",
 	"design": {
 		"ios": {
 			"pictureAspect": "noChange",