Create and add favicons

gulpfile.js

@@ -72,6 +72,10 @@ gulp.task('build', ['lint:sass'], () => {
     .src('src/sass/*.sass')
     .pipe(sass({ outputStyle: 'compressed' }))
     .pipe(gulp.dest(output + '/css'))
+
+  gulp
+    .src('src/favicons/**')
+    .pipe(gulp.dest(output))
 })
 
 gulp.task('watch', () => {

src/favicons/browserconfig.xml

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

src/favicons/safari-pinned-tab.svg

@@ -0,0 +1,26 @@
+<?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="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
+-2560z m2799 1004 c149 -75 172 -288 41 -383 -113 -82 -300 -60 -372 45 -73
+103 -44 262 59 325 47 29 79 37 154 38 51 1 76 -4 118 -25z m1431 -782 c0
+-721 1 -742 52 -789 61 -56 172 -70 290 -37 32 9 61 15 63 12 12 -12 83 -264
+77 -270 -20 -20 -214 -60 -318 -65 -281 -15 -447 95 -520 343 -15 52 -18 125
+-21 616 l-5 558 -196 2 -197 3 -3 148 -3 147 391 0 390 0 0 -668z m-3150 343
+l0 -195 270 0 271 0 -3 -147 -3 -148 -268 -3 -268 -2 3 -278 c3 -274 3 -277
+28 -322 39 -69 92 -93 212 -98 86 -4 205 12 264 35 13 5 79 -250 69 -266 -7
+-12 -154 -46 -264 -62 -103 -14 -275 -6 -351 16 -137 41 -227 115 -282 231
+-48 102 -58 185 -58 480 l0 264 -160 0 -160 0 0 143 0 144 167 7 c92 4 168 8
+169 9 1 1 12 83 24 182 12 99 23 186 25 193 3 9 44 12 160 12 l155 0 0 -195z
+m1800 -830 l0 -635 -190 0 -190 0 0 485 0 485 -252 2 -253 3 -3 148 -3 147
+446 0 445 0 0 -635z"/>
+</g>
+</svg>

src/favicons/site.webmanifest

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

src/index.pug

@@ -7,6 +7,17 @@ html(lang="en")
     link(rel="stylesheet", href="css/index.css")
     //- TODO: add Roboto Condensed in src/fonts and import from there
     link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto+Condensed")
+    //- NOTE: favicons are under "src/favicons" but in "public/" for build
+    link(rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png")
+    link(rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.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="#282a36")
+    link(rel="shortcut icon" href="favicon.ico")
+    meta(name="msapplication-TileColor" content="#282a36")
+    meta(name="msapplication-config" content="browserconfig.xml")
+    meta(name="theme-color" content="#282a36")
 
   body
     div(id="wrapper")

src/posts/june-2018.pug

@@ -7,6 +7,17 @@ html(lang="en")
     link(rel="stylesheet", href="../css/post.css")
     //- TODO: add Roboto Condensed in src/fonts and import from there
     link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto+Condensed")
+    //- NOTE: favicons are under "src/favicons" but in "public/" for build
+    link(rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png")
+    link(rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.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="#282a36")
+    link(rel="shortcut icon" href="../favicon.ico")
+    meta(name="msapplication-TileColor" content="#282a36")
+    meta(name="msapplication-config" content="../browserconfig.xml")
+    meta(name="theme-color" content="#282a36")
 
   body
     div(id="wrapper")

src/posts/may-2018.pug

@@ -7,6 +7,17 @@ html(lang="en")
     link(rel="stylesheet", href="../css/post.css")
     //- TODO: add Roboto Condensed in src/fonts and import from there
     link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto+Condensed")
+    //- NOTE: favicons are under "src/favicons" but in "public/" for build
+    link(rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png")
+    link(rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.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="#282a36")
+    link(rel="shortcut icon" href="../favicon.ico")
+    meta(name="msapplication-TileColor" content="#282a36")
+    meta(name="msapplication-config" content="../browserconfig.xml")
+    meta(name="theme-color" content="#282a36")
 
   body
     div(id="wrapper")

src/posts/template.pug

@@ -7,6 +7,17 @@ html(lang="en")
     link(rel="stylesheet", href="../css/post.css")
     //- TODO: add Roboto Condensed in src/fonts and import from there
     link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto+Condensed")
+    //- NOTE: favicons are under "src/favicons" but in "public/" for build
+    link(rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png")
+    link(rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.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="#282a36")
+    link(rel="shortcut icon" href="../favicon.ico")
+    meta(name="msapplication-TileColor" content="#282a36")
+    meta(name="msapplication-config" content="../browserconfig.xml")
+    meta(name="theme-color" content="#282a36")
 
   body
     div(id="wrapper")