Use the new logo for favicons, notifications badges, and homescreen app icons

client/img/icon-black-transparent-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st1{fill:black}</style><path d="M47.1 23.5v17.1c0 .1-.1.3-.2.4l-14.7 8.5c-.1.1-.3.1-.4 0L17.1 41c-.1-.1-.2-.2-.2-.4v-15c0-.1-.1-.3-.2-.4l-4-2.3c-.3-.2-.6 0-.6.4v19c0 .9.5 1.7 1.2 2.1l17.6 10.1c.8.4 1.7.4 2.5 0l17.5-10.1c.8-.4 1.2-1.3 1.2-2.1V21.8c0-.9-.5-1.7-1.2-2.1L33.3 9.6c-.8-.4-1.7-.4-2.5 0l-8.1 4.7c-.3.2-.3.6 0 .7l4.1 2.3c.1.1.3.1.4 0l4.7-2.7c.1-.1.3-.1.4 0L47 23.1c0 .1.1.2.1.4z" fill="black"/><circle class="st1" cx="40.3" cy="32.1" r="2.8"/><circle class="st1" cx="31.5" cy="32.1" r="2.8"/></svg>

client/img/logo-dark.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="chat_x5F_support">
-        <path d="M170.542,357.786c-15.944-2.444-31.341-6.704-46.024-12.779l-5.493-2.272l-44.78,16.973l15.091-33.515   l-8.914-7.281C48.552,292.879,31,258.503,31,222.119C31,145.96,108.141,84,202.96,84c66.491,0,124.284,30.47,152.885,74.937   c6.45,0.715,12.819,1.716,19.08,3.013C346.379,107.298,280.133,69,202.96,69C99.705,69,16,137.554,16,222.119   c0,42.354,20.999,80.691,54.934,108.411l-25.235,56.04l73.085-27.701c18.762,7.762,39.34,13.007,61.07,15.203   C176.34,368.804,173.231,363.368,170.542,357.786z" fill="#818B9E" />
-        <path d="M492,303.273c0-72.144-71.411-130.629-159.5-130.629S173,231.128,173,303.273s71.411,130.629,159.5,130.629   c25.834,0,50.229-5.036,71.813-13.965l62.35,23.633l-21.528-47.809C474.085,372.112,492,339.406,492,303.273z M253.5,334.606   c-14.636,0-26.5-11.864-26.5-26.5s11.864-26.5,26.5-26.5c14.636,0,26.5,11.864,26.5,26.5S268.136,334.606,253.5,334.606z    M332.5,334.606c-14.636,0-26.5-11.864-26.5-26.5s11.864-26.5,26.5-26.5s26.5,11.864,26.5,26.5S347.136,334.606,332.5,334.606z    M411.5,334.606c-14.636,0-26.5-11.864-26.5-26.5s11.864-26.5,26.5-26.5s26.5,11.864,26.5,26.5S426.136,334.606,411.5,334.606z" fill="#455164" />
-    </g>
-</svg>

client/img/logo-grey-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 386 386"><style>.st1{fill:#ff9e18}.st2{fill:#fff}</style><path fill="#415364" d="M0 0h386v386H0z"/><g transform="translate(0 55)"><path class="st1" d="M320.1 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L165.5 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5L258 38.3c-3.4-2-7.6-2-11.1 0l-36.3 20.8c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st2" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st2" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/></g><g transform="translate(0 55)"><path class="st2" d="M64.6 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L48.3 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0l-65.8-37.7c-.6-.2-1-.8-1-1.5z"/><ellipse class="st1" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st1" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/></g></svg>

client/img/logo.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="chat_x5F_support">
-        <path d="M170.542,357.786c-15.944-2.444-31.341-6.704-46.024-12.779l-5.493-2.272l-44.78,16.973l15.091-33.515   l-8.914-7.281C48.552,292.879,31,258.503,31,222.119C31,145.96,108.141,84,202.96,84c66.491,0,124.284,30.47,152.885,74.937   c6.45,0.715,12.819,1.716,19.08,3.013C346.379,107.298,280.133,69,202.96,69C99.705,69,16,137.554,16,222.119   c0,42.354,20.999,80.691,54.934,108.411l-25.235,56.04l73.085-27.701c18.762,7.762,39.34,13.007,61.07,15.203   C176.34,368.804,173.231,363.368,170.542,357.786z" fill="#818B9E" />
-        <path d="M492,303.273c0-72.144-71.411-130.629-159.5-130.629S173,231.128,173,303.273s71.411,130.629,159.5,130.629   c25.834,0,50.229-5.036,71.813-13.965l62.35,23.633l-21.528-47.809C474.085,372.112,492,339.406,492,303.273z M253.5,334.606   c-14.636,0-26.5-11.864-26.5-26.5s11.864-26.5,26.5-26.5c14.636,0,26.5,11.864,26.5,26.5S268.136,334.606,253.5,334.606z    M332.5,334.606c-14.636,0-26.5-11.864-26.5-26.5s11.864-26.5,26.5-26.5s26.5,11.864,26.5,26.5S347.136,334.606,332.5,334.606z    M411.5,334.606c-14.636,0-26.5-11.864-26.5-26.5s11.864-26.5,26.5-26.5s26.5,11.864,26.5,26.5S426.136,334.606,411.5,334.606z" fill="#f2f3f5" />
-    </g>
-</svg>

client/index.html.tpl

@@ -18,11 +18,29 @@
 
 	<title>The Lounge</title>
 
-	<link rel="shortcut icon" href="img/favicon.png" data-other="img/favicon-notification.png" data-toggled="false" id="favicon">
+	<!-- Browser tab icon -->
-	<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
+	<link id="favicon" rel="icon" sizes="16x16 32x32 64x64" href="img/favicon-normal.ico" data-other="img/favicon-alerted.ico" data-toggled="false" type="image/x-icon">
-	<link rel="mask-icon" href="img/logo.svg" color="<%- themeColor %>">
+
+	<!-- Safari pinned tab icon -->
+	<link rel="mask-icon" href="img/icon-black-transparent-bg.svg" color="#415363">
+
 	<link rel="manifest" href="manifest.json">
 
+	<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
+	<link rel="apple-touch-icon" sizes="120x120" href="img/logo-grey-bg-120x120px.png">
+	<!-- iPad and iPad mini @2x -->
+	<link rel="apple-touch-icon" sizes="152x152" href="img/logo-grey-bg-152x152px.png">
+	<!-- iPad Pro -->
+	<link rel="apple-touch-icon" sizes="167x167" href="img/logo-grey-bg-167x167px.png">
+	<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
+	<link rel="apple-touch-icon" sizes="180x180" href="img/logo-grey-bg-180x180px.png">
+
+	<!-- Windows 8/10 - Edge tiles -->
+	<meta name="application-name" content="The Lounge">
+	<meta name="msapplication-TileColor" content="<%- themeColor %>">
+	<meta name="msapplication-square70x70logo" content="img/logo-grey-bg-120x120px.png">
+	<meta name="msapplication-square150x150logo" content="img/logo-grey-bg-152x152px.png">
+
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 	<meta name="mobile-web-app-capable" content="yes">

client/js/socket-events/msg.js

@@ -187,8 +187,8 @@ function notifyMessage(targetId, channel, msg) {
 					} else {
 						const notify = new Notification(title, {
 							tag: `chan-${targetId}`,
-							badge: "img/logo-64.png",
+							badge: "img/icon-alerted-black-transparent-bg-72x72px.png",
-							icon: "img/touch-icon-192x192.png",
+							icon: "img/icon-alerted-grey-bg-192x192px.png",
 							body: body,
 							timestamp: timestamp,
 						});

client/manifest.json

@@ -4,24 +4,33 @@
 	"description": "Self-hosted web IRC client",
 	"start_url": ".",
 	"display": "standalone",
-	"theme_color": "#455164",
+	"theme_color": "#415363",
-	"background_color": "#455164",
+	"background_color": "#415363",
 	"icons":
 	[
 		{
-			"src": "img/touch-icon-192x192.png",
+			"src": "img/logo-grey-bg-120x120px.png",
-			"sizes": "192x192",
+			"sizes": "120x120"
-			"type": "image/png"
 		},
 		{
-			"src": "img/apple-touch-icon-120x120.png",
+			"src": "img/logo-grey-bg-152x152px.png",
-			"sizes": "120x120",
+			"sizes": "152x152"
-			"type": "image/png"
 		},
 		{
-			"src": "img/favicon.png",
+			"src": "img/logo-grey-bg-167x167px.png",
-			"sizes": "64x64",
+			"sizes": "167x167"
-			"type": "image/png"
+		},
+		{
+			"src": "img/logo-grey-bg-180x180px.png",
+			"sizes": "180x180"
+		},
+		{
+			"src": "img/logo-grey-bg-192x192px.png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "img/logo-grey-bg.svg",
+			"sizes": "193x193"
 		}
 	]
 }

client/service-worker.js

@@ -32,8 +32,8 @@ function showNotification(event, payload) {
 
 				return self.registration.showNotification(payload.title, {
 					tag: `chan-${payload.chanId}`,
-					badge: "img/logo-64.png",
+					badge: "img/icon-alerted-black-transparent-bg-72x72px.png",
-					icon: "img/touch-icon-192x192.png",
+					icon: "img/icon-alerted-grey-bg-192x192px.png",
 					body: payload.body,
 					timestamp: payload.timestamp,
 				});

test/plugins/link.js

@@ -14,7 +14,7 @@ describe("Link plugin", function() {
 	beforeEach(function(done) {
 		app = util.createWebserver();
 		app.get("/real-test-image.png", function(req, res) {
-			res.sendFile(path.resolve(__dirname, "../../client/img/apple-touch-icon-120x120.png"));
+			res.sendFile(path.resolve(__dirname, "../../client/img/logo-grey-bg-120x120px.png"));
 		});
 		this.connection = app.listen(9002, done);
 

test/plugins/storage.js

@@ -11,11 +11,11 @@ const link = require("../../src/plugins/irc-events/link.js");
 describe("Image storage", function() {
 	this.slow(200);
 
-	const testImagePath = path.resolve(__dirname, "../../client/img/apple-touch-icon-120x120.png");
+	const testImagePath = path.resolve(__dirname, "../../client/img/logo-grey-bg-120x120px.png");
 	const correctImageHash = crypto.createHash("sha256").update(fs.readFileSync(testImagePath)).digest("hex");
 	const correctImageURL = `storage/${correctImageHash.substring(0, 2)}/${correctImageHash.substring(2, 4)}/${correctImageHash.substring(4)}.png`;
 
-	const testSvgPath = path.resolve(__dirname, "../../client/img/logo.svg");
+	const testSvgPath = path.resolve(__dirname, "../../client/img/logo-grey-bg.svg");
 	const correctSvgHash = crypto.createHash("sha256").update(fs.readFileSync(testSvgPath)).digest("hex");
 	const correctSvgURL = `storage/${correctSvgHash.substring(0, 2)}/${correctSvgHash.substring(2, 4)}/${correctSvgHash.substring(4)}.svg`;