Adding Favicon (#505)

bin/build-site.js

@@ -209,6 +209,13 @@ async function buildSite() {
 		url: copyAssetToBuild( 'companies-table.js' ),
 	} ];
 
+	// Copy favicon files
+	console.log( 'Copying favicon files' );
+	const faviconPath = path.join( sitePath, 'assets', 'favicon-package' );
+	fs.readdirSync( faviconPath ).forEach( f => {
+		fs.copyFileSync( path.join( faviconPath, f ), path.join( siteBuildPath, f ) );
+	} );
+
 	// Generate the index.html file from the main README
 	// TODO: Build this page and its table dynamically; more filters
 	const readmeTemplate = swig.compileFile(

site/assets/favicon-package/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

site/assets/favicon-package/safari-pinned-tab.svg

@@ -0,0 +1,45 @@
+<?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="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3229 6126 c-2 -2 -48 -7 -102 -11 -54 -3 -108 -8 -120 -11 -12 -2
+-42 -6 -67 -9 -117 -13 -152 -18 -293 -45 -84 -16 -162 -31 -174 -35 -13 -3
+-32 -7 -43 -9 -180 -40 -558 -161 -705 -226 -11 -5 -42 -19 -70 -31 -355 -155
+-631 -313 -950 -543 -38 -27 -84 -62 -101 -76 -17 -14 -40 -32 -50 -40 -162
+-130 -265 -221 -423 -377 l-124 -123 24 -27 c13 -15 35 -38 49 -53 28 -29 240
+-255 290 -310 18 -19 87 -92 153 -163 l120 -128 81 83 c435 442 963 776 1538
+973 113 39 384 114 468 130 65 12 200 35 240 40 25 3 61 8 80 11 123 17 269
+26 460 26 163 0 307 -8 450 -26 30 -4 73 -9 95 -12 82 -10 344 -65 450 -95
+325 -90 692 -243 928 -388 37 -22 69 -41 72 -41 9 0 228 -149 320 -218 148
+-112 265 -212 411 -354 l130 -128 50 54 c27 30 78 85 114 123 36 38 121 129
+190 203 69 73 136 145 150 159 14 15 49 52 78 83 l53 55 -103 104 c-247 249
+-508 463 -783 645 -132 86 -135 88 -215 136 -30 17 -68 40 -85 50 -80 48 -445
+223 -558 268 -123 48 -345 128 -377 135 -8 1 -62 16 -120 33 -58 16 -126 35
+-152 41 -27 6 -67 16 -90 21 -47 12 -65 15 -148 30 -30 5 -68 12 -85 15 -77
+13 -102 18 -130 21 -16 2 -46 5 -65 8 -19 3 -66 8 -105 11 -38 4 -86 9 -105
+12 -39 6 -646 14 -651 9z"/>
+<path d="M3299 4206 c-2 -2 -38 -7 -79 -10 -362 -33 -727 -139 -1060 -308
+-153 -78 -164 -85 -315 -183 -170 -111 -324 -236 -488 -398 l-80 -78 44 -46
+c24 -25 51 -53 59 -63 8 -9 76 -81 150 -160 74 -79 165 -176 201 -215 36 -38
+93 -98 125 -133 l59 -62 85 83 c173 169 353 294 575 402 132 64 347 144 431
+159 16 2 63 11 104 20 41 8 95 18 120 21 71 11 439 14 500 5 30 -5 73 -11 95
+-14 421 -60 853 -274 1174 -584 l95 -91 35 38 c20 21 88 94 151 161 63 67 129
+137 145 154 70 75 281 300 292 311 10 10 -9 34 -88 111 -56 55 -106 104 -112
+109 -200 172 -371 293 -562 398 -105 58 -267 136 -315 152 -3 1 -18 7 -35 14
+-188 78 -466 151 -685 181 -47 6 -98 14 -115 17 -35 6 -500 14 -506 9z"/>
+<path d="M3438 2295 c-2 -2 -35 -5 -74 -8 -38 -4 -99 -13 -135 -22 -35 -9 -73
+-18 -83 -20 -35 -8 -161 -58 -219 -87 -55 -27 -167 -95 -177 -107 -3 -3 -30
+-25 -60 -48 -30 -23 -74 -61 -97 -85 l-43 -43 53 -56 c86 -92 303 -322 339
+-360 137 -147 287 -307 364 -388 50 -53 113 -120 139 -149 26 -28 52 -52 58
+-52 6 0 22 13 36 29 14 16 83 89 152 162 70 74 141 150 159 169 18 19 85 91
+150 160 65 69 139 148 165 175 140 149 184 196 236 251 l58 61 -67 61 c-94 85
+-117 103 -197 154 -138 89 -330 162 -490 188 -61 9 -261 20 -267 15z"/>
+</g>
+</svg>

site/assets/favicon-package/site.webmanifest

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

site/assets/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+  <g fill="none" transform="translate(1 127)">
+    <path fill="#DD7370" d="M0,225.801221 L93,325 C324.105,78.491034 698.895,78.491034 930,325 L1023,225.801221 C740.745,-75.2670736 282.72,-75.2670736 0,225.801221 Z"/>
+    <path fill="#D14540" d="M186,424.715015 L279,524 C407.34,386.986721 615.66,386.986721 744,524 L837,424.715015 C657.51,233.094995 365.955,233.094995 186,424.715015 Z"/>
+    <path fill="#C61610" d="M372,622.590106 L511.5,771 L651,622.590106 C574.275,540.469965 449.19,540.469965 372,622.590106 Z"/>
+  </g>
+</svg>

site/templates/base.html

@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="shortcut icon" href="/assets/remoteintech.png" type="image/x-icon" />
 		<title>{% block pageTitle %}{% endblock %} &#8211; Remote In Tech</title>
 		{%- for stylesheet in stylesheets %}
 			<link rel="stylesheet" type="text/css" href="{{ stylesheet.url }}" />
@@ -10,6 +11,14 @@
 		{%- for script in scripts %}
 			<script type="text/javascript" src="{{ script.url }}"></script>
 		{%- endfor %}
+		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+		<link rel="manifest" href="/site.webmanifest">
+		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+		<meta name="msapplication-TileColor" content="#da532c">
+		<meta name="theme-color" content="#ffffff">
 	</head>
 	<body class="page no-sidebar custom-background">
 		<div id="page" class="hfeed site">