add favicons

app/components/Meta/Meta.js

@@ -0,0 +1,47 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Parser from 'html-react-parser';
+import faviconData from '../../../faviconData.json';
+
+const faviconHtml = faviconData && faviconData.favicon.html_code;
+const Favicons = () => Parser(faviconHtml);
+
+const Meta = ({
+  url, type, title, description, image,
+}) => (
+  <Fragment>
+    <meta content="width=device-width,initial-scale=1" name="viewport" />
+
+    <title>{ title }</title>
+    <meta name="description" content={description} />
+
+    <meta property="og:url" content={url} />
+    <meta property="og:type" content={type} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:site_name" content="Timeline" />
+    <meta property="og:image" content={image} />
+    <meta property="og:image:width" content="200" />
+    <meta property="og:image:height" content="200" />
+
+    <Favicons />
+  </Fragment>
+);
+
+Meta.defaultProps = {
+  url: 'https://timeline.schoenwald.media',
+  type: 'website',
+  title: 'Timeline',
+  description: 'Overview of biblical Persons and events',
+  image: 'https://schoenwald.media/static/assets/images/favicon.png',
+};
+
+Meta.propTypes = {
+  url: PropTypes.string,
+  type: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.string,
+};
+
+export default Meta;

app/css/theme.css

@@ -59,6 +59,8 @@
   --color-purple: #c9c;
   --color-brown: #635f5e;
 
+  --color-theme: var(--color-green-darker);
+
   --text-color: #2d2d2d;
   --link-color: var(--color-green);
   --link-color-hover: var(--text-color);

faviconData.json

@@ -0,0 +1 @@
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/android-chrome-256x256.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/browserconfig.xml","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/favicon.ico","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/static/assets/images/favicons/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/static/assets/images/favicons/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/static/assets/images/favicons/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/static/assets/images/favicons/site.webmanifest\">\n<link rel=\"mask-icon\" href=\"/static/assets/images/favicons/safari-pinned-tab.svg\" color=\"#5bbad5\">\n<link rel=\"shortcut icon\" href=\"/static/assets/images/favicons/favicon.ico\">\n<meta name=\"msapplication-TileColor\" content=\"#41ad95\">\n<meta name=\"msapplication-TileImage\" content=\"/static/assets/images/favicons/mstile-144x144.png\">\n<meta name=\"msapplication-config\" content=\"/static/assets/images/favicons/browserconfig.xml\">\n<meta name=\"theme-color\" content=\"#41ad95\">","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\"]","meta[name=\"msapplication-config\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/static/assets/images/favicons"},"preview_picture_url":"https://realfavicongenerator.net/files/6acad0216b05c2fc38bdc7405a27e6a42fed8d0c/favicon_preview.png","version":"0.16"}

faviconDescription.json

@@ -0,0 +1,58 @@
+{
+	"masterPicture": "static/assets/images/favicon.png",
+	"iconsPath": "/static/assets/images/favicons",
+	"design": {
+		"ios": {
+			"pictureAspect": "backgroundAndMargin",
+			"backgroundColor": "#ffffff",
+			"margin": "14%",
+			"assets": {
+				"ios6AndPriorIcons": false,
+				"ios7AndLaterIcons": false,
+				"precomposedIcons": false,
+				"declareOnlyDefaultIcon": true
+			}
+		},
+		"desktopBrowser": {},
+		"windows": {
+			"pictureAspect": "noChange",
+			"backgroundColor": "#41ad95",
+			"onConflict": "override",
+			"assets": {
+				"windows80Ie10Tile": false,
+				"windows10Ie11EdgeTiles": {
+					"small": false,
+					"medium": true,
+					"big": false,
+					"rectangle": false
+				}
+			}
+		},
+		"androidChrome": {
+			"pictureAspect": "noChange",
+			"themeColor": "#41ad95",
+			"manifest": {
+				"name": "Timeline",
+				"display": "standalone",
+				"orientation": "notSet",
+				"onConflict": "override",
+				"declared": true
+			},
+			"assets": {
+				"legacyIcon": false,
+				"lowResolutionIcons": false
+			}
+		},
+		"safariPinnedTab": {
+			"pictureAspect": "silhouette",
+			"themeColor": "#5bbad5"
+		}
+	},
+	"settings": {
+		"scalingAlgorithm": "Mitchell",
+		"errorOnImageTooSmall": false,
+		"readmeFile": false,
+		"htmlCodeFile": false,
+		"usePathAsIs": false
+	}
+}