Merge pull request #91 from jonaskuske/feat/icon-image

Icons & Favicon

icon-dark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Dark" serif:id="Icon Dark" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#202b38;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>

icon-light.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Light" serif:id="Icon Light" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#efefef;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>

icons/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/icons/mstile-70x70.png"/>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <square310x310logo src="/icons/mstile-310x310.png"/>
+            <wide310x150logo src="/icons/mstile-310x150.png"/>
+            <TileColor>#00aba9</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

icons/safari-pinned-tab.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2378 5115 c-2 -1 -30 -5 -63 -9 -33 -3 -71 -8 -85 -10 -14 -3 -61
+-10 -105 -16 -239 -35 -599 -163 -835 -297 -479 -273 -886 -735 -1095 -1243
+-52 -128 -115 -324 -129 -400 -2 -14 -7 -36 -10 -50 -44 -190 -65 -557 -44
+-780 39 -410 195 -841 429 -1185 303 -446 735 -784 1239 -968 111 -41 310 -97
+395 -111 226 -38 248 -40 480 -41 275 0 380 12 635 76 233 59 453 147 643 258
+43 25 85 51 95 56 46 27 151 103 239 174 523 418 866 1043 940 1716 13 116 9
+511 -6 600 -49 295 -96 465 -194 693 -194 456 -557 879 -982 1146 -152 96
+-423 226 -520 250 -5 2 -18 6 -27 9 -37 14 -54 20 -83 27 -16 5 -73 20 -125
+33 -174 47 -356 69 -582 72 -113 2 -208 2 -210 0z"/>
+</g>
+</svg>

icons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Water.css",
+  "short_name": "Water.css",
+  "icons": [
+    {
+      "src": "/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

index.html

@@ -5,6 +5,18 @@
     <title>Water.css</title>
     <link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <!-- Icons generated with https://realfavicongenerator.net -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
+    <link rel="manifest" href="/icons/site.webmanifest" />
+    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" href="/icons/favicon.ico" />
+    <meta name="apple-mobile-web-app-title" content="Water.css" />
+    <meta name="application-name" content="Water.css" />
+    <meta name="msapplication-TileColor" content="#00aba9" />
+    <meta name="msapplication-config" content="/icons/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
 
     <script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
     <script>
@@ -190,7 +202,8 @@
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
 
-    <script src='script.js'></script>
+    <script src="https://unpkg.com/favicon-mode-switcher@^1.0.0" defer></script>
+    <script src="script.js" defer></script>
   </body>
 
-</html>
+</html>

script.js

@@ -1,4 +1,22 @@
-(function (ThemeSwitcher) {
+!(function() {
+  const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
+  if (!iconModeSwitcher) return
+  iconModeSwitcher([
+    {
+      element: 'link[rel="shortcut icon"]',
+      href: { dark: '/icons/light-favicon.ico' }
+    },
+    {
+      element: 'link[rel="icon"][sizes="16x16"]',
+      href: { dark: '/icons/light-favicon-16x16.png' }
+    },
+    {
+      element: 'link[rel="icon"][sizes="32x32"]',
+      href: { dark: '/icons/light-favicon-32x32.png' }
+    }
+  ])
+})()
+;(function (ThemeSwitcher) {
   const themeSwitcher = new ThemeSwitcher('stylesheet');
   const themeSwitchBtn = document.getElementById('switch');
   const themes = {