Add icons, fix #5

README.md

@@ -115,3 +115,21 @@ Verify that everything is okay with `service moshing-mammut status`.
 
 The app should now be reachable on http://localhost:3000 or whatever you configured your domain to be!
 
+# Icons
+
+Favicon is a combination of [speaker-line by remix icon](https://remixicon.com/icon/speaker-line)
+and [the official Mastodon icon](https://joinmastodon.org/en/branding).
+
+It has been mushed together by me, saved as SVG file in [icon.svg](./icon.svg)
+and turned into a slew of icons by [https://realfavicongenerator.net/](https://realfavicongenerator.net/):
+
+```sh
+npm install -g cli-real-favicon
+real-favicon generate faviconDescription.json faviconData.json static
+```
+
+Other icons:
+
+- [error-warning-fill by remix icon](https://remixicon.com/icon/error-warning-fill)
+- [git-branch-fill by remix icon](https://remixicon.com/icon/git-branch-fill)
+- [rss-fill by remix icon](https://remixicon.com/icon/rss-line)

faviconDescription.json

@@ -0,0 +1,64 @@
+
+{
+  "masterPicture": "./icon.svg",
+  "iconsPath": "/static",
+  "design": {
+    "ios": {
+      "pictureAspect": "backgroundAndMargin",
+      "backgroundColor": "#ffffff",
+      "margin": "0%",
+      "assets": {
+        "ios6AndPriorIcons": false,
+        "ios7AndLaterIcons": true,
+        "precomposedIcons": true,
+        "declareOnlyDefaultIcon": true
+      },
+      "appName": "Moshing Mammut"
+    },
+    "desktopBrowser": {
+      "design": "raw"
+    },
+    "windows": {
+      "pictureAspect": "whiteSilhouette",
+      "backgroundColor": "#2e0b78",
+      "onConflict": "override",
+      "assets": {
+        "windows80Ie10Tile": false,
+        "windows10Ie11EdgeTiles": {
+          "small": true,
+          "medium": true,
+          "big": true,
+          "rectangle": true
+        }
+      },
+      "appName": "Moshing Mammut"
+    },
+    "androidChrome": {
+      "pictureAspect": "noChange",
+      "themeColor": "#2e0b78",
+      "manifest": {
+        "name": "Moshing Mammut",
+        "display": "standalone",
+        "orientation": "notSet",
+        "onConflict": "override",
+        "declared": true
+      },
+      "assets": {
+        "legacyIcon": false,
+        "lowResolutionIcons": false
+      }
+    },
+    "safariPinnedTab": {
+      "pictureAspect": "blackAndWhite",
+      "threshold": 27.5,
+      "themeColor": "#2e0b78"
+    }
+  },
+  "settings": {
+    "scalingAlgorithm": "Mitchell",
+    "errorOnImageTooSmall": false,
+    "readmeFile": false,
+    "htmlCodeFile": false,
+    "usePathAsIs": false
+  }
+}

icon.svg

@@ -0,0 +1,7 @@
+<?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 1080 1080" 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:2;">
+    <g transform="matrix(1.1479,0,0,1.1479,-30.6849,-184.606)">
+        <path d="M394.962,828.42C395.182,833.842 395.637,839.066 396.328,844.053C407.304,927.369 478.944,932.362 546.806,934.687C615.3,937.031 676.288,917.8 676.288,917.8L679.102,979.724C679.102,979.724 631.194,1005.45 545.847,1010.18C498.785,1012.77 440.352,1009 372.293,990.982C224.682,951.913 199.297,794.568 195.412,634.913C194.228,587.513 194.958,542.815 194.958,505.432C194.958,389.045 229.261,290.625 266.058,262.36C280.549,251.229 294.537,251.58 309.264,251.58L770.736,251.58C786.666,251.58 799.578,264.493 799.578,280.422L799.578,799.578C799.578,815.508 786.666,828.42 770.736,828.42L394.962,828.42ZM540,759.411C619.644,759.411 684.21,694.845 684.21,615.201C684.21,535.557 619.644,470.991 540,470.991C523.462,470.991 507.575,473.775 492.781,478.899C436.326,498.454 395.79,552.094 395.79,615.201C395.79,694.845 460.355,759.411 540,759.411ZM540,701.727C492.212,701.727 453.474,662.989 453.474,615.201C453.474,567.413 492.212,528.675 540,528.675C587.788,528.675 626.526,567.413 626.526,615.201C626.526,662.989 587.788,701.727 540,701.727ZM540,408.951C563.893,408.951 583.263,389.582 583.263,365.688C583.263,341.794 563.893,322.425 540,322.425C516.107,322.425 496.737,341.794 496.737,365.688C496.737,389.582 516.107,408.951 540,408.951Z" style="fill:rgb(46,11,120);stroke:white;stroke-width:29.62px;"/>
+    </g>
+</svg>

src/app.html

@@ -2,11 +2,19 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
+		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
+		<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#2e0b78" />
+		<meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
+		<meta name="application-name" content="Moshing Mammut" />
+		<meta name="msapplication-TileColor" content="#2e0b78" />
+		<meta name="theme-color" content="#2e0b78" />
 		<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
 		<meta name="viewport" content="width=device-width" />
-		<meta name="theme-color" content="#17063B" media="(prefers-color-scheme: dark)" />
-		<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+		<meta name="theme-color" content="#2E0B78" media="(prefers-color-scheme: dark)" />
+		<meta name="theme-color" content="#BCB9B2" media="(prefers-color-scheme: light)" />
 		<link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Atom Feed" />
 		%sveltekit.head%
 		<style>

static/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>#2e0b78</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/safari-pinned-tab.svg

@@ -0,0 +1,28 @@
+<?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.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1945 6201 c-52 -13 -88 -37 -142 -94 -199 -211 -362 -703 -418
+-1267 -32 -318 -29 -1388 5 -1835 62 -826 246 -1369 576 -1708 181 -186 380
+-297 669 -372 707 -185 1455 -178 2006 18 l94 33 -4 120 c-1 65 -4 120 -6 122
+-1 1 -58 -9 -126 -22 -202 -41 -342 -57 -559 -63 -349 -10 -656 22 -857 89
+-239 79 -412 242 -492 462 -57 160 -79 360 -44 413 37 56 -35 53 1506 53
+l1424 0 26 24 c14 13 28 39 32 57 3 19 4 908 3 1977 l-3 1944 -33 29 -32 29
+-1798 -1 c-988 -1 -1810 -4 -1827 -8z m1994 -310 c125 -39 218 -120 274 -239
+30 -63 32 -74 32 -178 0 -107 -1 -112 -38 -186 -133 -269 -470 -329 -688 -122
+-176 169 -179 443 -6 616 50 50 140 102 205 117 64 15 157 12 221 -8z m99
+-1107 c397 -70 754 -371 891 -751 57 -157 74 -267 68 -453 -4 -120 -11 -186
+-25 -241 -78 -293 -249 -539 -489 -700 -482 -326 -1122 -256 -1524 168 -42 44
+-94 106 -116 139 -91 133 -166 319 -194 474 -17 96 -17 304 0 400 64 363 301
+685 628 852 239 123 489 160 761 112z"/>
+<path d="M3730 4143 c-165 -28 -327 -153 -395 -306 -162 -368 123 -774 523
+-744 323 24 551 332 477 646 -64 268 -335 449 -605 404z"/>
+</g>
+</svg>

static/site.webmanifest

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