realfavicongenerator added

faviconData.json

@@ -0,0 +1 @@
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/favicons.zip","files_urls":["https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/browserconfig.xml","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/favicon.ico","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/manifest.json","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/package_files/safari-pinned-tab.svg"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" href=\"/favicon-32x32.png\" sizes=\"32x32\">\n<link rel=\"icon\" type=\"image/png\" href=\"/favicon-16x16.png\" sizes=\"16x16\">\n<link rel=\"manifest\" href=\"/manifest.json\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#5bbad5\">\n<meta name=\"msapplication-TileColor\" content=\"#da532c\">\n<meta name=\"msapplication-TileImage\" content=\"/mstile-144x144.png\">\n<meta name=\"theme-color\" content=\"#424242\">","compression":"false","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-TileImage\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/a1d2520189de5f90c820708b801cc936f0dfcb6f/favicon_preview.png","version":"0.13"}

faviconDescription.json

@@ -0,0 +1,52 @@
+{
+    "masterPicture": "images/favicon.svg",
+    "iconsPath": "/",
+    "design": {
+        "ios": {
+            "pictureAspect": "noChange",
+            "assets": {
+                "ios6AndPriorIcons": false,
+                "ios7AndLaterIcons": false,
+                "precomposedIcons": false,
+                "declareOnlyDefaultIcon": true
+            }
+        },
+        "desktopBrowser": {},
+        "windows": {
+            "pictureAspect": "noChange",
+            "backgroundColor": "#da532c",
+            "onConflict": "override",
+            "assets": {
+                "windows80Ie10Tile": false,
+                "windows10Ie11EdgeTiles": {
+                    "small": false,
+                    "medium": true,
+                    "big": false,
+                    "rectangle": false
+                }
+            }
+        },
+        "androidChrome": {
+            "pictureAspect": "noChange",
+            "themeColor": "#ffffff",
+            "manifest": {
+                "display": "standalone",
+                "orientation": "notSet",
+                "onConflict": "override",
+                "declared": true
+            },
+            "assets": {
+                "legacyIcon": false,
+                "lowResolutionIcons": false
+            }
+        },
+        "safariPinnedTab": {
+            "pictureAspect": "silhouette",
+            "themeColor": "#5bbad5"
+        }
+    },
+    "settings": {
+        "scalingAlgorithm": "Mitchell",
+        "errorOnImageTooSmall": false
+    }
+}

gulpfile.js

@@ -5,6 +5,12 @@ const sass = require('gulp-sass');
 const sourcemaps = require('gulp-sourcemaps');
 const autoprefixer = require('gulp-autoprefixer');
 
+const realFavicon = require('gulp-real-favicon');
+const fs = require('fs');
+const FAVICON_DATA_FILE = 'faviconData.json';
+const masterFavicon = 'images/favicon.svg';
+const faviconsPath = 'images/favicons/';
+
 gulp.task('css', () => {
     return gulp.src('./sass/**/*.scss')
         .pipe(sourcemaps.init())
@@ -20,3 +26,89 @@ gulp.task('css', () => {
 gulp.task('css:watch', () => {
     gulp.watch('./sass/**/*.scss', ['sass']);
 });
+
+// Generate the icons. This task takes a few seconds to complete.
+// You should run it at least once to create the icons. Then,
+// you should run it whenever RealFaviconGenerator updates its
+// package (see the check-for-favicon-update task below).
+gulp.task('favicon-generate', function (done) {
+    realFavicon.generateFavicon({
+        masterPicture: masterFavicon,
+        dest: faviconsPath,
+        iconsPath: '/',
+        design: {
+            ios: {
+                pictureAspect: 'noChange',
+                assets: {
+                    ios6AndPriorIcons: false,
+                    ios7AndLaterIcons: false,
+                    precomposedIcons: false,
+                    declareOnlyDefaultIcon: true
+                }
+            },
+            desktopBrowser: {},
+            windows: {
+                pictureAspect: 'noChange',
+                backgroundColor: '#da532c',
+                onConflict: 'override',
+                assets: {
+                    windows80Ie10Tile: false,
+                    windows10Ie11EdgeTiles: {
+                        small: false,
+                        medium: true,
+                        big: false,
+                        rectangle: false
+                    }
+                }
+            },
+            androidChrome: {
+                pictureAspect: 'noChange',
+                themeColor: '#424242',
+                manifest: {
+                    display: 'standalone',
+                    orientation: 'notSet',
+                    onConflict: 'override',
+                    declared: true
+                },
+                assets: {
+                    legacyIcon: false,
+                    lowResolutionIcons: false
+                }
+            },
+            safariPinnedTab: {
+                pictureAspect: 'blackAndWhite',
+                threshold: 62.5,
+                themeColor: '#5bbad5'
+            }
+        },
+        settings: {
+            scalingAlgorithm: 'Mitchell',
+            errorOnImageTooSmall: false
+        },
+        markupFile: FAVICON_DATA_FILE
+    }, function () {
+        done();
+    });
+});
+
+// Inject the favicon markups in your HTML pages. You should run
+// this task whenever you modify a page. You can keep this task
+// as is or refactor your existing HTML pipeline.
+gulp.task('favicon-inject', function () {
+    return gulp.src([ 'index.html' ])
+        .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
+        .pipe(gulp.dest('.'));
+});
+
+// Check for updates on RealFaviconGenerator (think: Apple has just
+// released a new Touch icon along with the latest version of iOS).
+// Run this task from time to time. Ideally, make it part of your
+// continuous integration system.
+gulp.task('favicon-update', function (done) {
+    var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
+    realFavicon.checkForUpdates(currentVersion, function (err) {
+        if (err) {
+            throw err;
+        }
+    });
+});

images/favicons/browserconfig.xml

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

images/favicons/manifest.json

@@ -0,0 +1,17 @@
+{
+	"name": "",
+	"icons": [
+		{
+			"src": "\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png"
+		},
+		{
+			"src": "\/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image\/png"
+		}
+	],
+	"theme_color": "#424242",
+	"display": "standalone"
+}

index.html

@@ -5,13 +5,20 @@
     <title>{$delimiter=' · '}{if="isset($currentFeed)"}{$currentFeed->getName()}{$delimiter}{/if}{if="isset($currentFolder)"}{$currentFolder->getName()}{$delimiter}{/if}LeedVibes</title>
     <link rel="stylesheet" href="css/style.css" media="all">
     <meta name="viewport" content="width=device-width">
-    <link rel="icon" type="image/png" href="images/favicon.png" />
     {function="Plugin::callLink()"}
     {function="Plugin::callCss()"}
     <script src="js/modernizr.custom.js"></script>
     <!--[if lte IE 8]>
         <script src="js/respond.js"></script>
     <![endif]-->
+    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="images/favicons/manifest.json">
+    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">
+    <meta name="theme-color" content="#424242">
     <script src="js/jquery.min.js"></script>
     <script src="js/script.js"></script>
     {function="Plugin::callJs()"}

package.json

@@ -21,6 +21,7 @@
     "eslint-plugin-standard": "^2.0.1",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
+    "gulp-real-favicon": "^0.2.2",
     "gulp-sass": "^3.0.0",
     "gulp-sourcemaps": "^1.9.1",
     "stylelint": "^7.7.0"