diff --git a/res/manifest.json b/res/manifest.json
index f6f1e91bf4..75eeab7b01 100644
--- a/res/manifest.json
+++ b/res/manifest.json
@@ -5,69 +5,39 @@
"theme_color": "#76CFA6",
"start_url": "index.html",
"icons": [
- {
- "src": "/vector-icons/44.png",
- "sizes": "44x44",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/1240x600.png",
- "sizes": "1240x600",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/300.png",
- "sizes": "300x300",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/150.png",
- "sizes": "150x150",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/88.png",
- "sizes": "88x88",
- "type": "image/png"
- },
{
"src": "/vector-icons/24.png",
"sizes": "24x24",
"type": "image/png"
},
- {
- "src": "/vector-icons/50.png",
- "sizes": "50x50",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/620x300.png",
- "sizes": "620x300",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/1024.png",
- "sizes": "1024x1024",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/180.png",
- "sizes": "180x180",
- "type": "image/png"
- },
- {
- "src": "/vector-icons/152.png",
- "sizes": "152x152",
- "type": "image/png"
- },
{
"src": "/vector-icons/120.png",
"sizes": "120x120",
"type": "image/png"
},
{
- "src": "/vector-icons/76.png",
- "sizes": "76x76",
+ "src": "/vector-icons/144.png",
+ "sizes": "144x144",
+ "type": "image/png"
+ },
+ {
+ "src": "/vector-icons/152png",
+ "sizes": "152x152",
+ "type": "image/png"
+ },
+ {
+ "src": "/vector-icons/180.png",
+ "sizes": "180x180",
+ "type": "image/png"
+ },
+ {
+ "src": "/vector-icons/512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ },
+ {
+ "src": "/vector-icons/1024.png",
+ "sizes": "1024x1024",
"type": "image/png"
}
],
diff --git a/res/vector-icons/1024.png b/res/vector-icons/1024.png
index f4f073930b..77d67480eb 100644
Binary files a/res/vector-icons/1024.png and b/res/vector-icons/1024.png differ
diff --git a/res/vector-icons/120.png b/res/vector-icons/120.png
index 5a8544944e..bf604618f4 100644
Binary files a/res/vector-icons/120.png and b/res/vector-icons/120.png differ
diff --git a/res/vector-icons/1240x600.png b/res/vector-icons/1240x600.png
deleted file mode 100644
index 11a963db65..0000000000
Binary files a/res/vector-icons/1240x600.png and /dev/null differ
diff --git a/res/vector-icons/144.png b/res/vector-icons/144.png
new file mode 100644
index 0000000000..5f09750bc8
Binary files /dev/null and b/res/vector-icons/144.png differ
diff --git a/res/vector-icons/150.png b/res/vector-icons/150.png
deleted file mode 100644
index 407668e679..0000000000
Binary files a/res/vector-icons/150.png and /dev/null differ
diff --git a/res/vector-icons/152.png b/res/vector-icons/152.png
index aefe0df014..2948c2e9b0 100644
Binary files a/res/vector-icons/152.png and b/res/vector-icons/152.png differ
diff --git a/res/vector-icons/180.png b/res/vector-icons/180.png
index bfb7a33243..8a412c5604 100644
Binary files a/res/vector-icons/180.png and b/res/vector-icons/180.png differ
diff --git a/res/vector-icons/24.png b/res/vector-icons/24.png
index b0ef723eb8..3aa66a3b1c 100644
Binary files a/res/vector-icons/24.png and b/res/vector-icons/24.png differ
diff --git a/res/vector-icons/300.png b/res/vector-icons/300.png
deleted file mode 100644
index 6cbb21a568..0000000000
Binary files a/res/vector-icons/300.png and /dev/null differ
diff --git a/res/vector-icons/44.png b/res/vector-icons/44.png
deleted file mode 100644
index 171508dde0..0000000000
Binary files a/res/vector-icons/44.png and /dev/null differ
diff --git a/res/vector-icons/50.png b/res/vector-icons/50.png
deleted file mode 100644
index 1d8de2bf06..0000000000
Binary files a/res/vector-icons/50.png and /dev/null differ
diff --git a/res/vector-icons/512.png b/res/vector-icons/512.png
new file mode 100644
index 0000000000..337a183e30
Binary files /dev/null and b/res/vector-icons/512.png differ
diff --git a/res/vector-icons/620x300.png b/res/vector-icons/620x300.png
deleted file mode 100644
index f05c32b1c9..0000000000
Binary files a/res/vector-icons/620x300.png and /dev/null differ
diff --git a/res/vector-icons/76.png b/res/vector-icons/76.png
deleted file mode 100644
index 05af3bb8dd..0000000000
Binary files a/res/vector-icons/76.png and /dev/null differ
diff --git a/res/vector-icons/88.png b/res/vector-icons/88.png
deleted file mode 100644
index dec953bcf5..0000000000
Binary files a/res/vector-icons/88.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-114.png b/res/vector-icons/apple-touch-icon-114.png
deleted file mode 100644
index 1ae39a6deb..0000000000
Binary files a/res/vector-icons/apple-touch-icon-114.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-120.png b/res/vector-icons/apple-touch-icon-120.png
deleted file mode 100644
index 749f941a1e..0000000000
Binary files a/res/vector-icons/apple-touch-icon-120.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-144.png b/res/vector-icons/apple-touch-icon-144.png
deleted file mode 100644
index 0dcc56a802..0000000000
Binary files a/res/vector-icons/apple-touch-icon-144.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-152.png b/res/vector-icons/apple-touch-icon-152.png
deleted file mode 100644
index 2ac8c6dce4..0000000000
Binary files a/res/vector-icons/apple-touch-icon-152.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-180.png b/res/vector-icons/apple-touch-icon-180.png
deleted file mode 100644
index f87d72db93..0000000000
Binary files a/res/vector-icons/apple-touch-icon-180.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-57.png b/res/vector-icons/apple-touch-icon-57.png
deleted file mode 100644
index d80f385954..0000000000
Binary files a/res/vector-icons/apple-touch-icon-57.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-60.png b/res/vector-icons/apple-touch-icon-60.png
deleted file mode 100644
index d5ec84b038..0000000000
Binary files a/res/vector-icons/apple-touch-icon-60.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-72.png b/res/vector-icons/apple-touch-icon-72.png
deleted file mode 100644
index 85dbe1b82f..0000000000
Binary files a/res/vector-icons/apple-touch-icon-72.png and /dev/null differ
diff --git a/res/vector-icons/apple-touch-icon-76.png b/res/vector-icons/apple-touch-icon-76.png
deleted file mode 100644
index f328d1bd61..0000000000
Binary files a/res/vector-icons/apple-touch-icon-76.png and /dev/null differ
diff --git a/res/vector-icons/browserconfig.xml b/res/vector-icons/browserconfig.xml
deleted file mode 100644
index 0ac493167d..0000000000
--- a/res/vector-icons/browserconfig.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-
- #da532c
-
-
-
diff --git a/res/vector-icons/favicon.ico b/res/vector-icons/favicon.ico
deleted file mode 100644
index 6ad5fb0865..0000000000
Binary files a/res/vector-icons/favicon.ico and /dev/null differ
diff --git a/res/vector-icons/mstile-150.png b/res/vector-icons/mstile-150.png
deleted file mode 100644
index 6606d425f2..0000000000
Binary files a/res/vector-icons/mstile-150.png and /dev/null differ
diff --git a/res/vector-icons/mstile-310.png b/res/vector-icons/mstile-310.png
deleted file mode 100644
index 0ce998223b..0000000000
Binary files a/res/vector-icons/mstile-310.png and /dev/null differ
diff --git a/res/vector-icons/mstile-310x150.png b/res/vector-icons/mstile-310x150.png
deleted file mode 100644
index 42efd6a98e..0000000000
Binary files a/res/vector-icons/mstile-310x150.png and /dev/null differ
diff --git a/res/vector-icons/mstile-70.png b/res/vector-icons/mstile-70.png
deleted file mode 100644
index 709056bc61..0000000000
Binary files a/res/vector-icons/mstile-70.png and /dev/null differ
diff --git a/src/favicon.ts b/src/favicon.ts
index 7ff95e2f50..8d014157f6 100644
--- a/src/favicon.ts
+++ b/src/favicon.ts
@@ -192,6 +192,10 @@ export class BadgeOverlayRenderer extends IconRenderer {
}
}
+// multiple of 48 as per Google guidelines
+// multiple of 16 for higher quality scaling for small display
+const DEFAULT_FAVICON_SIZE = 144;
+
// Allows dynamic rendering of a circular badge atop the loaded favicon
// supports colour, font and basic positioning parameters.
// Based upon https://github.com/ejci/favico.js/blob/master/favico.js [MIT license]
@@ -218,14 +222,14 @@ export default class Favicon extends IconRenderer {
baseImage.setAttribute("crossOrigin", "anonymous");
baseImage.onload = (): void => {
// get height and width of the favicon
- this.canvas.height = baseImage.height > 0 ? baseImage.height : 32;
- this.canvas.width = baseImage.width > 0 ? baseImage.width : 32;
+ this.canvas.height = baseImage.height > 0 ? baseImage.height : DEFAULT_FAVICON_SIZE;
+ this.canvas.width = baseImage.width > 0 ? baseImage.width : DEFAULT_FAVICON_SIZE;
this.ready();
};
baseImage.setAttribute("src", lastIcon.getAttribute("href")!);
} else {
- this.canvas.height = baseImage.height = 32;
- this.canvas.width = baseImage.width = 32;
+ this.canvas.height = baseImage.height = DEFAULT_FAVICON_SIZE;
+ this.canvas.width = baseImage.width = DEFAULT_FAVICON_SIZE;
this.ready();
}
}
@@ -302,10 +306,6 @@ export default class Favicon extends IconRenderer {
elms[0].setAttribute("rel", "icon");
window.document.getElementsByTagName("head")[0].appendChild(elms[0]);
}
-
- elms.forEach((item) => {
- item.setAttribute("type", "image/png");
- });
return elms;
}
}
diff --git a/src/vector/index.html b/src/vector/index.html
index 0c21a0791b..bc6ccb2b0a 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -3,24 +3,18 @@
Element
-
-
-
-
-
-
-
-
-
+
+
+
+
-
+
+
+
-
-
-
,
- "sHeight": 32,
- "sWidth": 32,
+ "sHeight": 144,
+ "sWidth": 144,
"sx": 0,
"sy": 0,
},
@@ -62,8 +62,8 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
},
{
"props": {
- "x": 16.159999999999997,
- "y": 12.8,
+ "x": 72.72,
+ "y": 57.6,
},
"transform": [
1,
@@ -77,8 +77,8 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
},
{
"props": {
- "x": 22.4,
- "y": 12.8,
+ "x": 100.79999999999998,
+ "y": 57.6,
},
"transform": [
1,
@@ -92,8 +92,8 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
},
{
"props": {
- "x": 31.999999999999996,
- "y": 22.4,
+ "x": 143.99999999999997,
+ "y": 100.80000000000001,
},
"transform": [
1,
@@ -107,8 +107,8 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
},
{
"props": {
- "x": 9.92,
- "y": 32,
+ "x": 44.64,
+ "y": 144,
},
"transform": [
1,
@@ -122,8 +122,8 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
},
{
"props": {
- "x": 0.3200000000000003,
- "y": 22.4,
+ "x": 1.4400000000000048,
+ "y": 100.8,
},
"transform": [
1,
@@ -178,8 +178,8 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
"props": {
"maxWidth": null,
"text": "123",
- "x": 16,
- "y": 29,
+ "x": 72,
+ "y": 131,
},
"transform": [
1,
@@ -193,8 +193,8 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
},
{
"props": {
- "height": 32,
- "width": 32,
+ "height": 144,
+ "width": 144,
"x": 0,
"y": 0,
},
@@ -210,16 +210,16 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
},
{
"props": {
- "dHeight": 32,
- "dWidth": 32,
+ "dHeight": 144,
+ "dWidth": 144,
"dx": 0,
"dy": 0,
"img": ![]()
,
- "sHeight": 32,
- "sWidth": 32,
+ "sHeight": 144,
+ "sWidth": 144,
"sx": 0,
"sy": 0,
},
@@ -240,8 +240,8 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
[
{
"props": {
- "height": 32,
- "width": 32,
+ "height": 144,
+ "width": 144,
"x": 0,
"y": 0,
},
@@ -257,16 +257,16 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
},
{
"props": {
- "dHeight": 32,
- "dWidth": 32,
+ "dHeight": 144,
+ "dWidth": 144,
"dx": 0,
"dy": 0,
"img": ![]()
,
- "sHeight": 32,
- "sWidth": 32,
+ "sHeight": 144,
+ "sWidth": 144,
"sx": 0,
"sy": 0,
},
@@ -298,8 +298,8 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
},
{
"props": {
- "x": 16.159999999999997,
- "y": 12.8,
+ "x": 72.72,
+ "y": 57.6,
},
"transform": [
1,
@@ -313,8 +313,8 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
},
{
"props": {
- "x": 22.4,
- "y": 12.8,
+ "x": 100.79999999999998,
+ "y": 57.6,
},
"transform": [
1,
@@ -328,8 +328,8 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
},
{
"props": {
- "x": 31.999999999999996,
- "y": 22.4,
+ "x": 143.99999999999997,
+ "y": 100.80000000000001,
},
"transform": [
1,
@@ -343,8 +343,8 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
},
{
"props": {
- "x": 9.92,
- "y": 32,
+ "x": 44.64,
+ "y": 144,
},
"transform": [
1,
@@ -358,8 +358,8 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
},
{
"props": {
- "x": 0.3200000000000003,
- "y": 22.4,
+ "x": 1.4400000000000048,
+ "y": 100.8,
},
"transform": [
1,
@@ -414,8 +414,8 @@ exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
"props": {
"maxWidth": null,
"text": "123",
- "x": 16,
- "y": 29,
+ "x": 72,
+ "y": 131,
},
"transform": [
1,
diff --git a/test/unit-tests/favicon-test.ts b/test/unit-tests/favicon-test.ts
index 8972861773..32c1ea9966 100644
--- a/test/unit-tests/favicon-test.ts
+++ b/test/unit-tests/favicon-test.ts
@@ -14,6 +14,8 @@ jest.useFakeTimers();
describe("Favicon", () => {
beforeEach(() => {
+ jest.restoreAllMocks();
+ document.getElementsByTagName("head")[0]?.remove();
const head = document.createElement("head");
window.document.documentElement.prepend(head);
});
@@ -50,4 +52,40 @@ describe("Favicon", () => {
const newLink = window.document.querySelector("link");
expect(originalLink).not.toStrictEqual(newLink);
});
+
+ it("should default to 144px", () => {
+ const head = document.getElementsByTagName("head")[0];
+ const link = document.createElement("link");
+ link.rel = "icon";
+ link.href = "favicon.png";
+ head.appendChild(link);
+
+ const spy = jest.spyOn(document, "createElement");
+ const favicon = new Favicon();
+ jest.runAllTimers();
+
+ const img = spy.mock.results[0].value;
+ img.onload();
+
+ expect(favicon["canvas"].height).toBe(144);
+ });
+
+ it("should use the size of the last favicon", () => {
+ const head = document.getElementsByTagName("head")[0];
+ const link = document.createElement("link");
+ link.rel = "icon";
+ link.sizes = "512x512";
+ link.href = "favicon.png";
+ head.appendChild(link);
+
+ const spy = jest.spyOn(document, "createElement");
+ const favicon = new Favicon();
+ jest.runAllTimers();
+
+ const img = spy.mock.results[0].value;
+ img.height = 512;
+ img.onload();
+
+ expect(favicon["canvas"].height).toBe(512);
+ });
});